VScode Markdown环境搭建与学习
2020/8/17 一大罐白云
原文地址：https://www.cnblogs.com/Cloudcan/p/13518286.html
Markdown
- Markdown是一种轻量级标记语言，允许人们使用易读易写的纯文本格式[1]编写文档。文档后缀为.md或.markdown。
- Markdown编辑器：
- 本文推荐VSCode，因其跨平台、运行快速、扩展丰富且更新频繁。有更宽的自定义的空间。
- Typora也是不错的选择，跨平台，实现了所见即所得的用户体验，导出各种格式比较方便，非常适合Markdown小白。缺点是更新下载速度慢，文本太大时容易卡，有时会遇到奇怪的bug。对于学习markdown语法不是最好的选择。
- Notepad++也尝试过，作为编辑器它打开各种格式文本文档速度很快，但对Markdown支持不是很好，已知的几个官方预览插件已停止更新，不支持公式预览。
- Cmd Markdown 在线阅读编辑器。
- 推荐使用Markdown的理由:上手快，容易学习，功能丰富，资源占用小。是写文章、做笔记、写文档的不二之选。
VScode Markdown环境搭建
推荐搭配:
Markdown All in One (提供丰富的快捷功能)
+
Markdown Preview Enhanced (支持\(KaTeX\)[2]公式预览和Mermaid图表,提供更优质的预览和自定风格)
VScode扩展Markdown All in One
- 在VScode扩展中搜索Markdown All in One并安装
- 在设置中勾选自动在侧边栏显示预览
- 快捷键支持:
| Key | Command | 指令 |
|---|---|---|
| Ctrl/Cmd + B | Toggle bold | 切换粗体 |
| Ctrl/Cmd + I | Toggle italic | 切换斜体 |
| Ctrl/Cmd + Shift + ] | Toggle heading (uplevel) | 切换标题(上层) |
| Ctrl/Cmd + Shift + [ | Toggle heading (downlevel) | 切换标题(下层) |
| Ctrl/Cmd + M | Toggle math environment | 切换数学环境 |
| Alt + C | Check/Uncheck task list item | 选中/取消任务列表项 |
| Ctrl/Cmd + Shift + V | Toggle preview | 切换预览 |
| Ctrl/Cmd + K V | Toggle preview to side | 切换预览到侧面 |
- 格式化表格
- 完成表格分隔符、内容与缩进
- ALT+SHIFT+F
- 自动生成、更新目录
- CTRL+SHIFT+P
- 生成目录: 输入mctoc ( 选择markdown all in one: create table of content )
- 更新目录: 输入mutoc ( 选择markdown all in one: updata table of content )
- 转为HTML
- CTRL+SHIFT+P
- 输入mpcd ( 选择Markdown: Print current document to HTML)
- 转PDF
最稳妥的方式是将导出的HTML通过Chrome打开，再打印为PDF。 - 数学
使用Markdown Preview Enhanced或者Markdown+Math扩展实现
VScode扩展Markdown Preview Enhanced
- 特性
自动编辑器及预览滑动同步
导入外部文件
Code Chunk
Pandoc
Prince
电子书
幻灯片
可扩展性
LaTeX 数学
导出 PDF, PNG, 以及 JPEG 凭借 Puppeteer
导出漂亮的 HTML（移动端支持）
编译到 GitHub Flavored Markdown
自定义预览 CSS
TOC 生成
流程图 / 时序图 以及各种其他种类的图形
嵌入 LaTeX, 渲染 TikZ, Chemfig 等图形
Task List (Github Flavored)
图片助手
脚注
Front Matter
以及更多。。。 - 功能过多，请直接访问文档查看
VScode扩展Markdown+Math
- 在VScode扩展中搜索Markdown+Math并安装，即可实现Markdown对公式的支持
- 该插件使用\(KaTeX\)实现\(\TeX\)公式快速实时渲染。
- Markdown Preview Enhanced中已经包含了相同的功能
Markdown要素学习[3]
1.标题
使用 = 和 - 标记一级和二级标题
我展示的是一级标题
=================
我展示的是二级标题
-----------------
我展示的是一级标题
我展示的是二级标题
使用 # 号标记
使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2.段落与格式
换行
段落没有特殊的格式，直接编写文字就好，换行是使用两个以上空格加上回车。
字体
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
分割线
在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。
***
* * *
*****
- - -
----------
删除线
~~BAIDU.COM~~
BAIDU.COM
下划线
Markdown 并无下划线的原生语法，因为会和链接的默认样式产生混淆。
解决方法是使用行内 HTML
<u>Underlined Text</u>
Underlined Text
脚注
脚注是对文本的补充说明，有的预览不支持脚注。
创建脚注格式类似这样 [^Jiaozhu]。
[^Jiaozhu]:这是一个脚注说明。
创建脚注格式类似这样 [4]。
3.列表
无序列表
星号(*)、加号(+)、减号(-)作为列表标记，这些标记后面要添加一个空格
* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项
- 第一项
- 第二项
- 第一项
- 第二项
- 第一项
- 第二项
有序列表
使用数字并加上. 号来表示
1. 第一项
2. 第二项
3. 第三项
- 第一项
- 第二项
- 第三项
列表嵌套
子列表中的选项前面添加四个空格即可
1. 第一项
1. 第一项
- 第一项
- 第一项
4.区块
段落开头使用 > 符号 ，然后后面紧跟一个空格符号，可以嵌套使用
>区块
>* 第一项
>>* 第一项
区块
- 第一项
- 第一项
5.代码
行内代码
使用反引号`把代码包起来（键盘左上角）
格式化输出函数`printf()`
格式化输出函数printf()
代码块
可以用```包裹一段代码，并指定一种语言（也可不指定）
```C
#include <stdio.h>
int main(){
return 0;
}
```
#include <stdio.h>
int main(){
return 0;
}
6.链接
[BING](https://cn.bing.com)
7.图片
感叹号!接方括号[]，里面放上图片的替代文字。接着一个普通括号()。里面放上图片的网址或文件地址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。
8.表格
| 表头 | 表头 |
| ------ | ------ |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
| 表头 | 表头 |
|---|---|
| 单元格 | 单元格 |
| 单元格 | 单元格 |
表格对齐方式
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-:设置内容和标题栏居中对齐。
| 左对齐 | 右对齐 | 居中对齐 |
| :----- | -----: | :------: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
| 左对齐 | 右对齐 | 居中对齐 |
|---|---|---|
| 格 | 格 | 格 |
| 格 | 格 | 格 |
9.高级技巧
支持的 HTML 元素
目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等
<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>表格自动格式化
Alt+Shift+F表格自动格式化
转义
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
公式
行内公式
$\Delta$
\(\Delta\)
公式块[5]
$$
\nabla\times\textbf{H}=\textbf{J}_{c}+\epsilon\frac{\partial\textbf{E}}{\partial t}\\
\nabla\times\textbf{E}=-\frac{\partial\textbf{B}}{\partial t}\\
\nabla\cdot\textbf{D}=\rho_{v}\\
\nabla\cdot\textbf{B}=0\\
$$
Mermaid图表[6]
横向流程图:
```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
```
注释
可以直接被文本编辑器打开的文档。类似于HTML，它们同属于标记语言，markdown比HTML更轻量。word文档不属于纯文本文档，其中包含了大量的格式信息，所以word文档一般比纯文本文档更大。 ↩︎
不代表新的语法，它是一个web数学公式渲染器，使用web技术实现\(\TeX\)公式的快速渲染。这里可以在线体验\(KaTeX:demo\)。 ↩︎
这是一个脚注说明。 ↩︎
由KaTeX支持的\(\TeX\)函数列表\(KaTeX:supported\) ↩︎
