Markdown新手入门指南(VSCode中使用)
文章目录
- 1. 前言
- 2. 语法说明
- 3. 特殊语法说明
- 4. 辅助功能
- 5. 参考资料
1. 前言
1.1. 什么是 Markdown？
Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，粗体 或者 斜体 某些文字。
1.2. 本文档描述了什么？
本入门指南详细介绍了：
- 如何在VSCode中搭建Markdown编辑环境
- VSCode中可添加哪些辅助Markdown开发插件
- Markdown基本语法详细说明及应用示例演示
1.3. 必备插件推荐
- Markdown All In One-----------------------VSCode中引入Markdown，常用快捷键、目录、自动补全，快捷键添加标题编号
- Markdown Emoji----------------------------使得markdown支持github :emoji: 表情（Markdown表情关键字大全）
- Markdown Math-----------------------------插件用于在md文件中添加数学公式（Markdown－Math语法）
- Markdown PDF------------------------------插件用于将md文件导出为PDF格式
- Markdown Preview Enhanced--------------更好的markdown预览
- markdownlint--------------------------------markdown语言分析、样式检查（markdownlint规则详细介绍及自定义参数设置）
- Markdown shortcuts------------------------使得markdown支持常用快捷键
- Markdown Extended------------------------使得markdown支持常用快捷键、表格增删与格式化、输出格式设置等
- Markdown TOC------------------------------强大的目录功能
- Markdown Table Prettifier-------------------使得表格更适合阅读
- markdown-formatter------------------------提供了相对统一的格式和一些快捷功能(用法简绍)
2. 语法说明
2.1. 斜体和粗体
使用 * 和 ** 表示斜体和粗体。
Markdown源语法：
这是 *斜体*
这是 **粗体**
***这是斜体加粗的文字***
实际效果：
这是 斜体
这是 粗体。
这是斜体加粗的文字
2.2. 删除线
使用 ~~ 表示删除线。
Markdown源语法：
~~这是一段错误的文本。~~
实际效果：
这是一段错误的文本。
2.3. 分级标题
使用 === 表示一级标题，使用 — 表示二级标题。
Markdown源语法：
# 这是一个一级标题
============================
## 这是一个二级标题
--------------------------------------------------
### 这是一个三级标题
你也可以选择在行首加井号表示不同级别的标题 (H1-H6)，例如：# H1, ## H2, ### H3，#### H4。
2.4. 超链接
Markdown 支持两种形式的链接语法： 行内式和参考式两种形式，行内式一般使用较多
2.4.1. 行内式
- 语法说明：
[]里写链接文字，()里写链接地址, ()中的”“中可以为链接指定title属性，title属性可加可不加。title属性的效果是鼠标悬停在链接上会出现指定的 title文字。[链接文字](链接地址 “链接标题”)’这样的形式。链接地址与链接标题前有一个空格。 - 代码：
欢迎来到[梵居闹市](http://blog.leanote.com/freewalk "梵居闹市")
- 显示效果
欢迎来到梵居闹市
2.4.2. 参考式
参考式超链接一般用在学术论文上面，或者另一种情况，如果某一个链接在文章中多处使用，那么使用引用 的方式创建链接将非常好，它可以让你对链接进行统一的管理。
- 语法说明：
参考式链接分为两部分，文中的写法 [链接文字][链接标记]，在文本的任意位置添加[链接标记]:链接地址 “链接标题”，链接地址与链接标题前有一个空格。
如果链接文字本身可以做为链接标记，你也可以写成[链接文字][]
[链接文字]：链接地址的形式，见代码的最后一行。 - 代码
我经常去的几个网站[Google][1]、[Leanote][2]以及[自己的博客][3][Leanote 笔记][2]是一个不错的[网站][]。
/*若使用和定义紧邻，必须添加此空行*/
[1]:http://www.google.com "Google"
[2]:http://www.leanote.com "Leanote"
[3]:http://http://blog.leanote.com/freewalk "梵居闹市"
[网站]:http://http://blog.leanote.com/freewalk
- 显示效果
我经常去的几个网站Google、Leanote以及自己的博客Leanote 笔记是一个不错的网站。
2.4.3. 自动链接
- 语法说明：
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如： - 代码
<http://example.com/>
<address@example.com>
2.5. 锚点
网页中，锚点其实就是页内超链接，也就是链接本文档内部的某些元素，实现当前页面中的跳转。比如我这里写下一个锚点，点击回到目录，就能跳转到目录。 在目录中点击这一节，就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的。
注意：
一、Markdown Extra 只支持在标题后插入锚点，其它地方无效。
二、Leanote 编辑器右侧显示效果区域暂时不支持锚点跳转，所以点来点去发现没有跳转不必惊慌，但是你发布成笔记或博文后是支持跳转的。
- 语法描述：
在你准备跳转到的指定标题后插入锚点{#标记}，然后在文档的其它地方写上连接到锚点的链接。 - 代码
## 0. 目录{#index}
跳转到[目录](#index)
- 显示效果
跳转到辅助功能
2.6. 无序列表
使用 *，+，- 表示无序列表。
二级列表的实现：在一级列表前使用一个Tab键，三级列表同理
Markdown源语法：
- 无序列表项 一
- 二级列表
- 三级列表
- 无序列表项 二
- 无序列表项 三
- 无序列表项 一
- 二级列表
- 三级列表
- 二级列表
- 无序列表项 二
- 无序列表项 三
2.7. 有序列表
使用数字和点表示有序列表。
注意：序号跟内容之间要有空格
Markdown源语法：
1. 有序列表项 一
2. 有序列表项 二
3. 有序列表项 三
- 有序列表项 一
- 有序列表项 二
- 有序列表项 三
2.8. 文字引用
使用 > 表示文字引用。
Markdown源语法：
> 野火烧不尽，春风吹又生。
实际效果：
野火烧不尽，春风吹又生。
2.9. 行内代码块
使用 `代码` 表示行内代码块。
Markdown源语法：
让我们聊聊 `html`。
实际效果：
让我们聊聊 html。
2.10. 插入图像
- 普通插入
使用  插入图像。
Markdown源语法：
实际效果：
2. 定义大小并居中显示
<div align=center><img width = '100' height ='100' src ="https://www.zybuluo.com/static/img/my_head.jpg"/></div>
2.11. 自动生成文档目录
在段落中填写 [TOC] 以显示全文内容的目录结构。
Markdown源语法：
@[toc]
# 一级标题
## 二级标题
### 三级标题
点击此处，获取标题自动编号脚本
或CSDN搜索：Markdown标题自动编号脚本（附python源码+windows可执行文件exe）
2.12. 标签分类
在编辑区任意行的列首位置输入以下代码给文稿标签：
标签： 数学 英语 Markdown
或者
Tags： 数学 英语 Markdown
2.13. 注脚
使用 [^keyword] 表示注脚。
Markdown源语法：
这是一个注脚[^footnote]的样例。
这是第二个注脚[^footnote2]的样例。
实际效果：
这是一个注脚[^footnote]的样例。
这是第二个注脚[^footnote2]的样例。
2.14. LaTeX 公式
$ 表示行内公式：
质能守恒方程可以用一个很简洁的方程式
E
=
m
c
2
E=mc^2
E=mc2 来表达。
$$ 表示整行公式：
** Markdown源语法**
$$\sum_{i=1}^n a_i=0$$
$$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$
$$\sum^{j-1}{k=0}{\widehat{\gamma}{kj} z_k}$$
实际效果：
∑
i
=
1
n
a
i
=
0
\sum_{i=1}^n a_i=0
i=1∑nai=0
f ( x 1 , x x , … , x n ) = x 1 2 + x 2 2 + ⋯ + x n 2 f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 f(x1,xx,…,xn)=x12+x22+⋯+xn2
∑ k = 0 j − 1 γ ^ k j z k \sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k} k=0∑j−1γ kjzk
2.15. 绘制表格
第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
- 文字默认居左
- 两边加"："表示文字居中
- 右边加"：“表示文字居右
注：语法两边都要用”|"包起来
Markdown源语法：
| 项目 | 价格 | 数量 |
| -------- | -----: | :----: | 分割表头和内容
| 计算机<br>手机| \$1600 | 5 | 使用<br>可在单元格内部换行
| 手机 | \$12 | 12 |
| 管线 | \$1 | 234 |
实际效果：
| 项目 | 价格 | 数量 |
|---|---|---|
| 计算机 手机 | $1600 | 5 |
| 手机 | $12 | 12 |
| 管线 | $1 | 234 |
2.16. 代码块
使用 四个缩进空格 表示代码块。
Markdown源语法：
这是一个代码块，此行左侧有四个不可见的空格。
实际效果：
这是一个代码块，此行左侧有四个不可见的空格。
2.17. 加强的代码块
2.17.1. 格式模板
- 格式一：单行代码：代码之间分别用一个反引号包起来
Markdown源语法：
这是实际效果`create database hero`
这是实际效果create database hero
2. 格式二：代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行
示例二：（备注：“```C”：C关键字高亮；“```python”：python关键字高亮）
```
代码…
代码…
代码…
```
2.17.2. 多行代码块演示示例
Markdown源语法：
```
function fun(){
echo “这是一句非常牛逼的代码”;
}
fun();
```
实际效果：
function fun(){
echo "这是一句非常牛逼的代码";
}
fun();
2.17.3. 多行C代码关键字高亮示例
Markdown源语法：
```c
static FUNC(void, LIN_PUBLIC_CODE) Lin_ClearLinChBuffer
(
P2VAR(Lin_ChInternalStatusType, AUTOMATIC, LIN_APPL_CONST) ChannelStatusPtr
);
```
实际效果：
static FUNC(void, LIN_PUBLIC_CODE) Lin_ClearLinChBuffer
(
P2VAR(Lin_ChInternalStatusType, AUTOMATIC, LIN_APPL_CONST) ChannelStatusPtr
);
2.17.4. 多行Python代码关键字高亮示例
Markdown源语法：
```Python
if name == ‘main’:
app = PLin_AutoTestApi.PLinApiConsoleClass()
app.connectToDevice(1, 19200)
app.configureFrame(‘0x20’, ‘publisher’, ‘enhanced’, 8)
Msg = [1, 2, 3, 4, 5, 6, 7, 8]
app.sendFrameToDevice(‘0x20’, Msg)
```
if __name__ == '__main__':
app = PLin_AutoTestApi.PLinApiConsoleClass()
app.connectToDevice(1, 19200)
app.configureFrame('0x20', 'publisher', 'enhanced', 8)
Msg = [1, 2, 3, 4, 5, 6, 7, 8]
app.sendFrameToDevice('0x20', Msg)
2.18. 流程图
2.18.1. 语法讲解
| 类别 | 示例 | 说明 |
|---|---|---|
| ```flow ``` | ```flow … 流程图中功能块定义 指定执行流程 … ``` | 基本流程图框架 |
| start | st=>start: Start | 添加起始图标，并设置文字内容，并取别名st |
| inputoutput | io=>inputoutput: verification | 添加输入图标，并设置文字内容，并取别名io |
| operation | op=>operation: Your Operation | 添加操作图标，并设置文字内容，并取别名op |
| condition | cond=>condition: Yes or No? | 添加判断图标，并设置文字内容，并取别名cond |
| subroutine | sub=>subroutine: Your Subroutine | 添加子程序图标，并设置文字内容，并取别名sub |
| end | e=>end | 添加结束图标，并取别名e |
2.18.2. 演示示例
Markdown源语法：
```flow
st=>start: Start
io=>inputoutput: verification
op=>operation: Your Operation
cond=>condition: Yes or No?
sub=>subroutine: Your Subroutine
e=>end
st->io->op->cond
cond(yes)->e
cond(no)->sub->io
```
实际效果：
2.19. 序列图
2.19.1. 演示示例1
Markdown源语法：
```seq
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob–>Alice: I am good thanks!
```
实际效果：
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
2.19.2. 演示示例2
Markdown源语法：
```seq
Title: Here is a title
A->B: Normal line
B–>C: Dashed line
C->>D: Open arrow
D–>>A: Dashed open arrow
```
实际效果：
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
2.20. 甘特图
甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
section 项目实施
概要设计 :2016-07-05 , 5d
详细设计 :2016-07-08, 10d
编码 :2016-07-15, 10d
测试 :2016-07-22, 5d
section 发布验收
发布: 2d
验收: 3d
2.21. 制作一份待办事宜 [Todo 列表]
Markdown源语法：
- [ ] 支持以 PDF 格式导出文稿
- [ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
- [x] 新增 Todo 列表功能
- [x] 修复 LaTex 公式渲染问题
- [x] 新增 LaTex 公式编号功能
实际效果：
- 支持以 PDF 格式导出文稿
- 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
- 新增 Todo 列表功能
- 修复 LaTex 公式渲染问题
- 新增 LaTex 公式编号功能
2.22. 定义型列表
Markdown源语法：
名词 1
: 定义 1（左侧有一个可见的冒号和四个不可见的空格）
代码块 2
: 这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）
代码块（左侧有八个不可见的空格）
效果展示：
名词 1
: 定义 1（左侧有一个可见的冒号和四个不可见的空格）
-
代码块 2
-
这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）
代码块（左侧有八个不可见的空格）
2.23. Html 标签
Markdown源语法：
<table>
<tr>
<th rowspan="2">值班人员</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李强</td>
<td>张明</td>
<td>王平</td>
</tr>
</table>
效果展示：
| 值班人员 | 星期一 | 星期二 | 星期三 |
|---|---|---|---|
| 李强 | 张明 | 王平 |
2.24. 分割线
格式：—或----或***或****
Markdown源码：
---------------------------------
---
***
----
****
2.25. 实际效果：
3. 特殊语法说明
3.1. 表格中使用换行
Markdown源码：
|表头|表头|表头|
|---|---|---|
|在此处换行<br>第二行文字|||
实际效果：
| 表头 | 表头 | 表头 |
|---|---|---|
| 在此处换行 第二行文字 |
3.2. 当前行中添加空格
Markdown源码：
在本段文字之后添加空格
  # 注意：最后面的“;”分号一定要有
与上段文字之间存在空格
备注：
半方大的空白 或 
全方大的空白 或 
不断行的空白格 或 
在本段文字之后添加空格 与上段文字之间存在空格
4. 辅助功能
4.1. 快捷键为各级标题添加序号
VSCode中添加插件-》Markdown All In One-》Vscode中Ctrl+Shift+P-》搜索Markdown all in one-》找到：添加/更新章节序号-》自定义快捷键
4.2. 导出带书签的PDF（PDF中存在目录书签）
- VSCode中安装插件markdown-PDF和markdown preview enhanced
- 需事先安装好Prince
Windows 64-bit installer为安装包版本
Windows 64-bit ZIP为免安装版本
对于 macOS，打开 terminal 终端然后运行一下命令：brew install Caskroom/cask/prince - 添加环境变量
在电脑系统变量中的Path中添加Prince的安装路径
- 打开预览，然后在预览界面右键，选择导出pdf选项PDF（prince）
- 解决导出PDF中字体格式问题
ctrl+shift+p 打开搜索，输入Markdown Preview Enhanced: Customize Css , 并点击进入，刚开始长这样
输入这段配置，把字体设置成微软雅黑，并添加页码
.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
font-family: Microsoft YaHei;
/* prince设置参数 */
&.prince {
/* 添加页码 */
@page {
@bottom {
font-family: Microsoft YaHei;
content: counter(page) " / " counter(pages)
}
}
}
}
修改后长这样，就可以了
4.3. Markdown表格快捷生成网站
md表格快捷生成网站：https://www.tablesgenerator.com/markdown_tables，点击此处实现跳转
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
