使用vs code编写Markdown文档以及markdown语法详解
首先安装vscode工具,下载地址如下: https://code.visualstudio.com/
在vs code的扩展中安装: Markdown Preview Enhanced 这款插件,安装完成重新加载即可生效
新建一个.md文件
Visual Studio Code 原生就支持高亮Markdown的语法,想要一边编辑一遍预览,有两种方法:
3.1. Ctrl + Shift + P 调出主命令框,输入 Markdown,应该会匹配到几项 Markdown相关命令2.2. 先按Ctrl + K,然后放掉,紧接着再按 v,也能调出实时预览框。【要在英文输入状态下】
3.3 直接点击快捷图标
还可以在预览效果的界面中右键鼠标选择在不同平台预览,如可以在浏览器中预览
其中默认打开的浏览器是IE浏览器,可以直接Copy浏览器地址使用Chrome浏览器打开
可以发现在浏览器中预览markdown文档已经被编译成HTML文档了。
------------------------------------------------------------附录Markdown语法------------------------------------------------------------------------------
1. 直接使用 HTML 标签,可以设置文字居中,字体颜色等样色(HTML 语法)
代码:
<div align="center" style="color:red">VS Code 使用 Markdown 编写文档</div>
演示:
2. 标题
注:# 后面保持空格(和使用 h1/h2 标签功能类似)
代码:
# h1
## h2
演示:
3. TOC(根据标题生成目录)
代码:
演示:
4. 引用
代码1(单行式):
> hello world!
演示:
代码2(多行式):
> hello world! 输入完之后按两次空格键再按一次Enter键即可
> hello world! 输入完之后按两次空格键再按一次Enter键即可
> hello world! 输入完之后按两次空格键再按一次Enter键即可
演示:
代码3(多层嵌套):
> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc
演示:
5. 行内标记(用 ` 标记代码块将变成一行)
代码:标记之外`hello world`标记之外
演示:
6. 代码块
1. 用```代码```进行包裹
代码:
```
<div>
<div></div>
<div></div>
<div></div>
</div>
```
演示:
2. 自定义语法(根据不同的语言配置不同的代码着色)
代码:
```javascript
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
```
演示:
7. 插入链接(待定。。。)
代码:
[百度 1](http://www.baidu.com/ '百度一下')
演示:
8. 插入图片
代码:

8. 插入图片带有链接
代码:
[](http://www.baidu.com)
9. 插入视频
注:Markdown 语法是不支持直接插入视频的
普遍的做法是 插入 HTML 的 iframe 框架,通过网站自带的分享功能获取,如果没有可以尝试第二种方法
第二是伪造播放界面,实质是插入视频图片,然后通过点击跳转到相关页面
代码:
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>
演示:
10. 序列
代码1(有序):
1. one
2. two
3. three
演示:
代码2(无序):
* one
* two
* three
演示:
代码3(序表嵌套):
1. one
1. one-1
2. two-2
2. two
* two-1
* two-2
演示:
代码4(序表嵌套代码块)
注:换行+两个Tab
* one
var a = 10; // 与上行保持空行并 递进缩进
演示:
11. 任务列表(类似于多选框)
代码:
- [ ] 选项一
- [x] 选项二
演示:
12. 表情(待定。。。。)
13. 表格
注: : 代表对齐方式
代码1:
| a | b | c |
|:--:|:-- | --:| #这句代码只能写在第二行
| 居中 | 左对齐 | 右对齐 |
代码2(简约写法):
a | b | c
:---:|:------------ |--:
居中 | 左对齐 | 右对齐
代码3(特殊表格):使用HTML代码
演示:
14. 支持内嵌CSS样式
代码:<p style="color: #AD5D0F;font-size: 30px; font-family: '宋体';">内联样式</p>
演示:
15. 语义标记
代码:
*斜体*、_斜体_
**加粗**
***加粗+斜体***、**_加粗+斜体_**
~~删除线~~
==背景色==
$\underline{下划线}$
Superscript - superscript
^superscript^
Subscript - subscript
~subscript~
演示:
16. 语义标签
代码:
<i>斜体</i>
<b>加粗</b>
<em>强调</em>
<u>下划线</u>
<del>删除</del>
Z<sup>a</sup>
Z<sub>a</sub>
<kbd>Ctrl</kbd>
演示:
17. 公式
代码:
$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $
演示:
18. 分隔符
代码: --- 或者 ***
演示:
19. 脚注
代码:
Markdown[^1]
[^1]: Markdown是一种纯文本标记语言 // 在文章最后面显示脚注
演示:
20. 锚点
代码:
[公式标题锚点](#1)
#### [任务列表(类似于多选框)] {#1} // 方括号后保持空格
演示:
代码部分:
连接部分:
点击点击跳到指定的标题:
21. 定义型列表
注:解释型定义
代码:
Markdown
: 轻量级文本标记语言,可以转换成html,pdf等格式 // 开头一个`:` + `Tab` 或 四个空格
演示:
24.自动邮箱链接
代码:
<xxx@outlook.com>
演示:
25. 流程图
代码:
```
graph LR
A-->B
```
```
sequenceDiagram
A->>B: How are you?
B->>A: Great!
```
```
gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d
```
演示:
26. 时序图
代码:
```sequence
A->>B: 你好
Note left of A: 我在左边
Note right of B: 我在右边
B-->A: 很高兴认识你
```
```sequence
起床->吃饭: 稀饭油条
吃饭->上班: 不要迟到了
上班->午餐: 吃撑了
上班->下班:
Note right of 下班: 下班了
下班->回家:
Note right of 回家: 到家了
回家-->>起床:
Note left of 起床: 新的一天
```
演示:
语法原文: https://www.jianshu.com/p/b03a8d7b1719
使用vs code编写Markdown文档以及markdown语法详解的更多相关文章
- 一个完整的WSDL文档及各标签详解
<?xml version="1.0" encoding="UTF8" ?> <wsdl:definitions targetNamespac ...
- elasticsearch系列三:索引详解(分词器、文档管理、路由详解(集群))
一.分词器 1. 认识分词器 1.1 Analyzer 分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...
- MongoDB开发深入之一:文档数据关系模型详解(一对多,多对多)
文档关联模型通常有3种方式: 嵌入式(一对一.一对多) 后期手动统一ID处理(一对多.多对多) References引用(一对一.一对多) 文档树模型通常有3种方式: 父引用(Parent Refer ...
- 文档学习 - UILabel - 属性详解
#import "ViewController.h" @implementation ViewController - (void)viewDidLoad { [super vie ...
- VS Code 搭建合适的 markdown 文档编写环境
写在开头,之前我是使用Gitee与Github作为图床和Picgo搭配Typora使用的 ,但因为最近觉得这样还是稍微比较繁琐,然后因为VS Code是我的主要文本编辑器.Cpp,Python等均是在 ...
- 使用 VS Code + Markdown 编写 PDF 文档
背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...
- vscode使用Markdown文档编写
首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默认集成markdown文档编辑插件.可以新建一 ...
- 基于 Markdown 编写接口文档
最近公司开发项目需要前后端分离,这样话就设计到后端接口设计.复杂功能需要提供各种各样的接口供前端调用,因此编写API文档非常有必要了 网上查了很多资料,发现基于Markdown编写文档是一种比较流行而 ...
- 使用 VS Code 撰写 Markdown 文档
众所周知, VS Code 是微软和社区一起开发的一款很优秀的高级代码编辑器.它不仅可以写出一手好代码,还能写出一篇好文章.利用 Markdown 就可以写出一篇排版美观的技术文章了. 而 Markd ...
随机推荐
- SAP 销售订单交货对成本中心记账
销售订单发货不计入主营业务成本,而是直接接入费用科目,与成本中心挂钩的业务经常发生.不少公司只是简单地处理交货,计入主营业务成本,然后财务再手工将成本归结到相关的成本中心.其实SAP系统是支持销售订单 ...
- DevOps VS 职责分离
原文地址: https://medium.com/@jeehad.jebeile/devops-and-segregation-of-duties-9c1a1bea022e 原文作者:Jeehad J ...
- 41-data-packed volume container
在上一节的例子中 volume container 的数据归根到底还是在 host 里,有没有办法将数据完全放到 volume container 中,同时又能与其他容器共享呢? 当然可以,通常我们称 ...
- rman备份有效性验证/恢复进度监控
故障一定会发生,只是早晚的问题!作为一名DBA时刻要记着备份,备份的有效性同样重要,不要当某一天最需要的时候,发现悲剧了...验证rman备份是否可以成功还原,11g后可以通过命令验证但,验证全备份一 ...
- Scrapy_redis
简介 scrapy_redis是一个基于Redis的Scrapy组件,用于scrapy项目的分布式部署和开发 你可以启动多个spider对象,互相之间共享有一个redis的request队列,最适合多 ...
- 四、排序算法总结二(归并排序)(C++版本)
一.什么是归并排序? 归并排序是基于分而治之的思想建立起来的. 所谓的分而治之,也就是将一个数据规模为N的数据集,分解为两个规模大小差不多的数据集(n/2),然而分别处理这两个更小的问题,就相当于解决 ...
- [题解向] Manacher简单习题
\(1\) LG1659 [国家集训队]拉拉队排练 求前\(k\)大的奇数长度回文串的长度之积. \(\rm |S|\leq 1e6,K\leq 1e12\) --一开始觉得挺水,就开始二分最少长度能 ...
- Thymeleaf入门与基础语法
1.简介 Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - HTML.可以在直接浏览器中正确显示 ...
- IT兄弟连 Java语法教程 数组 数组的声明
Java语言支持两种语法格式来定义数组: type[] arrayName; type arrayName[]; 对这两种语法格式而言,通常推荐使用第一种格式,因为第一种格式不仅具有更好的语义,而且具 ...
- 基于python的selenium常用操作方法(2)
9 多表单切换 在Web应用中经常会遇到frame/iframe表单嵌套页面的应用,WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌页面上的元素无法直接定位.这 ...