VS Code中markdown

Markdown All in One

支持一般markdown语法和功能，不支持mermaid、emoji等特殊用法。
预览使用功能键Ctrl + Shift + V。
在Command Palette（命令控制板Ctrl + Shift + P）内有一些非常有用的命令：
Markdown All in One: Create Table of Contents 创建目录
Markdown All in One: Update Table of Contents 更新目录
Markdown All in One: Add/Update section numbers 添加 / 更新章节编号
Markdown All in One: Remove section numbers 删除章节编号
Markdown All in One: Toggle code span 触发设置代码范围（code）
Markdown All in One: Toggle code block 触发设置代码块(codes)
Markdown All in One: Print current document to HTML
Markdown All in One: Toggle math environment 触发设置数学环境
Markdown All in One: Toggle list 触发设置列表环境

Markdown Preview Enhanced

• 支持mermaid、emoji等特殊用法。

• Markdown Preview Enhanced 内部支持 flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染。 也可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。

• 但要注意，它们生成的图，pdf或pandoc等并不一定都可以直接输出。比如mermaid的甘特图、序列图和流程图，可以直接输出到pdf，而类图、饼图、状态图、日程图等在直接生成的pdf文档中显示不出来。
  解决办法是先保存成html文件，然后再打印成pdf文件。
  在Command Palette（命令控制板）内有一些非常有用的命令：

• Markdown: Markdown Preview Enhanced: Open Preview to the Slide
  Markdown: Markdown Preview Enhanced: Open Preview
  Markdown Preview Enhanced: Create Toc 生成 TOC（需要预览实现打开）。
  Markdown Preview Enhanced: Toggle Scroll Sync 开／关预览滑动同步。
  Markdown Preview Enhanced: Toggle Live Update 开／关预览实时更新。 如果关闭了，则预览只会在 markdown 文件保存时才会更新。
  Markdown Preview Enhanced: Insert New Slide 插入新幻灯片并进入 presentation 模式。
  Markdown Preview Enhanced: Insert Table 插入表格。
  Markdown Preview Enhanced: Insert Page Break 插入断页符。
  Markdown Preview Enhanced: Image Helper 图片助手支持快速插入图片链接，拷贝本地图片，和上传图片（powered by imgur and sm.ms）。国内用户推荐使用 sm.ms，墙内不限量免费上传图片。
  更多命令和MPE操作详细说明参见 Markdown Preview Enhanced中文版

vscode-drawio 流程图

这个插件和markdown无关，是用来画流程图的，相当于简版的visio。

使用方法：

安装vscode-drawio插件
先在桌面创建一个空白的.drawio文件。
然后在VS code里打开这个文件，就会出现类似visio的操作界面。

语法

1. 文本部分
   1.1 斜体和粗体，删除线

例：斜体 和 粗体和删除线

1.2 分级标题
在行首加#号表示不同级别的标题 (H1-H6)，或（使用 === 表示一级标题，使用 — 表示二级标题。）例：

1.3 常用 Emoji & Font-Awesome

👊 📓 📧 😄 🎥 📷
🚗 📞 ☎️ ❤️ ⏰ ➿
👍 📚 ✉️ 👎 💡 🔨
🚀 📖 ✉️ ☀️ 🔎 📈
☁️ 📊 🎐 🌺 📎 👻
🐛 📅 🎈 🍻 🎸 🎧
🍚 🎸 🎓 🏠 🗻 🏢
🚀 🏫 💘 🎶 💩 🐾
💬
更多表情

1.4 引用和注脚

标注

• 上标：30^th
• 下标：H₂O
• 脚注：Content ¹

缩略：

The HTML specification
is maintained by the W3C.

这里要有空格隔开中文

明 明 如 月，何 时 可 辍

标记
marked

1.5 外链接
这是去往 百度 的链接。
我的邮箱：siriusing.cc@qq.com

1.6 文字引用

野火烧不尽，春风吹又生。

1.7 内容目录
在段落中填写 [TOC] 以显示全文内容的目录结构。

2. 标签分类
   在编辑区任意行的列首位置输入以下代码给文稿标签：

标签： 数学 英语 Markdown
Tags： 数学 英语 Markdown

2.0 常用布局
2.1 无序列表
使用 *，+，- 表示无序列表。

示例：

• 无序列表项 一
• 无序列表项 二
• 无序列表项 三

2.2 有序列表
使用数字和点表示有序列表。

2.3 行内代码块
使用 代码 表示行内代码块。

示例：

让我们聊聊 html。

tips:只要在左边做一个tab缩进就可以变成代码块
这是一个代码块，此行左侧有四个不可见的空格。
这是一个代码块，此行左侧有四个不可见的空格。
2.4 插入图像

2.5 表格

项目	价格	数量
计算机	$1600	5
手机	$12	12
管线	$1	234
>	ce	ce

2.6 定义型列表
名词 1
: 定义 1（左侧有一个可见的冒号和四个不可见的空格）

代码块 2

这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）

代码块（左侧有八个不可见的空格）
2.7 Html 标签
本站支持在 Markdown 语法中嵌套 Html 标签，譬如，你可以用 Html 写一个纵跨两行的表格：
设置colspan，rowspan

值班人员	星期一	星期二	星期三
	李强	张明	王平

2.8 待办事宜 Todo 列表 使用带有 [ ] 或 [x] （未完成或已完成）项的列表语法撰写一个待办事宜列表，并且支持子列表嵌套以及混用Markdown语法，例如：

• 完成
• 未完成

4. 数学和LaTeX
   $ 表示行内公式：

质能守恒方程可以用一个很简洁的方程式 $E=m{c}^2$来表达。

$$ 表示整行公式：

$$\sum _{i=1}^n{a}_i=0$$

常用计算速查

功能	语法
括号	直接()[] { x } \{x\} {x}
括号匹配大小	$\left(\frac{\sqrt{x}}{y^3}\right)$
绝对值	$|x|$$\Vert x\Vert$ $⟨x⟩$
向上取整，向下取整	$\lceil x\rceil$ $\lfloor x\rfloor$
额外的括号	$\frac{1}{2}\}$
累加	${\sum }_1^n$ , ${\sum }_{i=0}^{\infty }{i}^2$
累乘	${\prod }_{L}n$ . ${\prod }_{i=1}^n{i}^2$
积分	${\int }_1^n$, ${\int }_{i=1}^n{i}^2,\iint ,\iiint$
并交	${\bigcup }_1^n{x}_i\bigcap$
分数	$\frac{a}{b}$ $\frac{a+1}{b+1}+\frac{a+1}{b+1}$
开方	$\sqrt{x^3}$, $\sqrt[3]{\frac{x}{y}}$
取极限	${\lim }_{x\to 0}$
三角函数	$\sin x$
逻辑运算	$<>\le \ge \ne$
加咸乘除点	$÷\pm \mp x\cdot y$
集合运算	$\cup \cap \setminus \subset \subseteq ⊊\supset Xin\notin \varnothing \varnothing$
	$$\left(\genfrac{}{}{0ex}{}{n+l}{2k}\right)or\left(\genfrac{}{}{0ex}{}{n+l}{2k}\right)$
各种箭头	$\to \to \leftarrow \Rightarrow \Leftarrow \mapsto$$
逻辑运算	$\wedge Mor\neg \forall \exists \top \perp ⊢\models$$
异或，点，星	$\star \ast \oplus \circ \bullet$
约等于…	$\approx \sim \simeq \cong \equiv \prec ⊲$
无限大	$\infty {\aleph }_0\nabla \partial \Im \Re$
	$a\equiv b(\mathrm{m}\mathrm{o}\mathrm{d}n)$
	$ϵ,\epsilon ,\varphi ,\phi ,\ell$
	$\hat{x},\widehat{xy},\bar{x},\overline{xyz},\vec{x},\overrightarrow{xyz},\overleftrightarrow{xy}$
	$\dot{x},\ddot{x}$
	$\backslash$
希腊字母	$\alpha ,\beta ,\omega$
	$\Gamma ,\Delta ,\Omega$

省略号

$a_1,a_2,\dots ,a_n$
$a_1+a_2+\dots +a_n$
$a_1+a_2+\cdots +a_n$

字体

$\mathsf{A}\mathsf{B}\mathsf{C}\mathsf{D}\mathsf{E}\mathsf{F}\mathsf{G}\mathsf{H}\mathsf{I}\mathsf{J}\mathsf{K}\mathsf{L}\mathsf{M}\mathsf{N}\mathsf{O}\mathsf{P}\mathsf{Q}\mathsf{R}\mathsf{S}\mathsf{T}\mathsf{U}\mathsf{V}\mathsf{W}\mathsf{X}\mathsf{Y}\mathsf{Z}$
$\mathcal{A}\mathcal{B}\mathcal{C}\mathcal{D}\mathcal{E}\mathcal{F}\mathcal{G}\mathcal{H}\mathcal{I}\mathcal{J}\mathcal{K}\mathcal{L}\mathcal{M}\mathcal{N}\mathcal{O}\mathcal{P}\mathcal{Q}\mathcal{R}\mathcal{S}\mathcal{T}\mathcal{U}\mathcal{V}\mathcal{W}\mathcal{X}\mathcal{Y}\mathcal{Z}$
$\mathcal{A}\mathcal{B}\mathcal{C}\mathcal{D}\mathcal{E}\mathcal{F}\mathcal{G}\mathcal{H}\mathcal{I}\mathcal{J}\mathcal{K}\mathcal{L}\mathcal{M}\mathcal{N}\mathcal{O}\mathcal{P}\mathcal{Q}\mathcal{R}\mathcal{S}\mathcal{T}\mathcal{U}\mathcal{V}\mathcal{W}\mathcal{X}\mathcal{Y}\mathcal{Z}$
$\mathfrak{A}\mathfrak{B}\mathfrak{C}\mathfrak{D}\mathfrak{E}\mathfrak{F}\mathfrak{G}\mathfrak{H}\mathfrak{I}\mathfrak{J}\mathfrak{K}\mathfrak{L}\mathfrak{M}\mathfrak{N}\mathfrak{O}\mathfrak{P}\mathfrak{Q}\mathfrak{R}\mathfrak{S}\mathfrak{T}\mathfrak{U}\mathfrak{V}\mathfrak{W}\mathfrak{X}\mathfrak{Y}\mathfrak{Z}$

常用公式

$x_i^2$，$x_i^2+x_{i^2}$，$10^{10}$
${\log }_{2}x$
${x^y}^z+x^{y^z}$
${\sum }_{k=0}^{j-1}{\hat{\gamma }}_{kj}{z}_k$
${\sum }_{i=0}^n{i}^2=\frac{(n^2+n)(2n+1)}{6}$
$f(x_1,x_x,\dots ,x_n)=x_1^2+x_2^2+\cdots +x_n^2$
$\underset{t\to 0}{\lim }{\int }_t^{1}f(t)dt$
${\lim }_{t\to 0}{\int }_t^{1}f(t)dt$.

如果需要大小调整，大小写切换写

$$\left(\right(\left(\right((x)\left)\right)\left)\right)gives(((((x)))))$$

括号自适应大小
$$(\frac{\sqrt{x}}{y^3})$$
$$\left(\frac{\sqrt{x}}{y^3}\right)$$

等式
$$\begin{array}{rl}a& =b+c\\ & =d+e+f+g\\ & =h+i\end{array}$$

4.2 矩阵
$$\begin{array}{ccc}1& x& x^2\\ 1& y& y^2\\ 1& z& z^2\end{array},\left(\begin{array}{cc}1& 2\\ 1& 2\end{array}\right),\left[\begin{array}{cc}1& 2\\ 1& 2\end{array}\right],\left\{\begin{array}{cc}1& 2\\ 1& 2\end{array}\right\},\left|\begin{array}{cc}1& 2\\ 1& 2\end{array}\right|,\Vert \begin{array}{cc}1& 2\\ 1& 2\end{array}\Vert$$

省略元素 \cdots ⋯ \ddots ⋱ vdots ⋮

$$\begin{array}{ccccc}{a}_{11}& a_{12}& a_{13}& \cdots & a_{1n}\\ a_{21}& a_{22}& a_{23}& \cdots & a_{2n}\\ ⋮& ⋮& ⋮& \ddots & ⋮\\ a_{n1}& a_{n2}& a_{n3}& \cdots & a_{2n}\end{array}$$

$$\left[\begin{array}{ccc}1& 2& 3\\ 4& 5& 6\end{array}\right]$$

$$f(n)=\{\begin{array}{ll}n/2,& \text{if n is even}\\ 3n+1,& \text{if n is odd}\end{array}$$

$$\begin{array}{lc}\text{if n is even:}& n/2\\ \text{if n is odd:}& 3n+1\end{array}\}=f(n)$$

上下行的间距调整 ex
$$f(n)=\{\begin{array}{ll}\frac{n}{2},& \text{if n is even}\\ 3n+1,& \text{if n is odd}\end{array}$$

$$\{\begin{array}{c}{a}_{1}x+b_{1}y+c_{1}z=d_1\\ a_{2}x+b_{2}y+c_{2}z=d_2\\ a_{3}x+b_{3}y+c_{3}z=d_3\end{array}$$

aligned 对齐
$$\{\begin{array}{rl}{a}_{1}x+b_{1}y+c_{1}z& =d_1+e_1\\ a_{2}x+b_{2}y& =d_2\\ a_{3}x+b_{3}y+c_{3}z& =d_3\end{array}$$

继续用em调整行距
$$\{\begin{array}{l}{a}_{1}x+b_{1}y+c_{1}z=d_1\\ a_{2}x+b_{2}y+c_{2}z=d_2\\ a_{3}x+b_{3}y+c_{3}z=d_3\end{array}$$

4.3 颜色
$blackText$，$grayText$
$silverText$，$whiteText$

$maroonText$，$redText$
$yellowText$，$greenText$
$tealText$，$aquaText$
$blueText$，$navyText$
$purpleText$，$fuchsiaText$

5. 流程图
   5.1 简单流程图

更多

5.2 序列图

更多

5.3 mermaid 甘特图
甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。

参考文档

5.4 puml 序列图

5.5 dot

viz 或者 dot 代码块中的内容将会被 Viz.js 渲染。
你可以通过 {engine="…"} 来选择不同的渲染引擎。 引擎 circo，dot，neato，osage，或者 twopi 是被支持的。默认下，使用 dot 引擎。

Hi 这里是一个注脚，会自动拉到最后面排版 ↩

---

1. Hi 这里是一个注脚，会自动拉到最后面排版
   效果： ↩︎