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 外链接
这是去往 百度 的链接。
我的邮箱：[email protected]

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\}$
括号匹配大小	$\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},xy,\bar{x},\overline{xyz},x,xyz,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}{\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 简单流程图

Created with Raphaël 2.3.0 Start verification Your Operation Yes or No? End Your Subroutine yes no

更多

5.2 序列图

A B C D Normal line Dashed line Open arrow Dashed open arrow A B C D Here is a title

更多

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

Mon 27 Mon 04 Mon 11 Mon 18 Mon 25 August 需求分析 可行性报告 概念验证 概要设计 详细设计 编码 测试 发布 验收 项目确定 项目实施 发布验收 项目开发流程

参考文档

5.4 puml 序列图

5.5 dot

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

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

---

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