[开发工具]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)，或（使用 === 表示一级标题，使用 — 表示二级标题。）例：

H1

H2

H3

H4。

1.3 常用 Emoji & Font-Awesome
a b c d e f
1 👊 📓 📧 😄 🎥 📷
2 :fa-car: 📞 ?? ?? ? ?
3 👍 📚 ?? 👎 💡 🔨
4 🚀 📖 ?? ?? 🔎 📈
5 ?? 📊 🎐 🌺 📎 👻
6 🐛 📅 🎈 🍻 🎸 🎧
7 🍚 🎸 🎓 🏠 🗻 🏢
8 🚀 🏫 💘 🎶 💩 🐾
9 💬
image.png
更多emoji查看

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] 以显示全文内容的目录结构。

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

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

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

示例：

• 无序列表项 一
• 无序列表项 二
• 无序列表项 三
  效果：

无序列表项 一
无序列表项 二
无序列表项 三
2.2 有序列表
使用数字和点表示有序列表。
示例：

有序列表项 一
有序列表项 二
有序列表项 三
2.3 行内代码块
使用 代码 表示行内代码块。

示例：

让我们聊聊 html。

tips:只要在左边做一个tab缩进就可以变成代码块
这是一个代码块，此行左侧有四个不可见的空格。
这是一个代码块，此行左侧有四个不可见的空格。
2.4 插入图像
使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pO2Ae0nP-1630662537092)(图片链接地址)] 插入图像。

2.5 表格支持

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

代码块 2

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

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

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

质能守恒方程可以用一个很简洁的方程式 来表达。

$$ 表示整行公式：

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

4.1 常用计算速查
image.png
image.png
image.png
省略号
$ a_1,a_2,\ldots,a_n$
$ a_1+a_2+\ldots+a_n$
$ a_1+a_2+\cdots+a_n$
image.png
字体
$ \mathsf{ABCDEFGHIJKLMNOPQRSTUVWXYZ} $
$ \mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZ} $
$ \mathscr{ABCDEFGHIJKLMNOPQRSTUVWXYZ} $
$ \mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ} $
image.png
常用公式
$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,\ldots,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$.
image.png
如果需要大小调整，大小写切换写

$$\left(\right(\left(\right((x)\left)\right)\left)\right)gives(((((x)))))$$
image.png
括号自适应大小
$$(\frac{\sqrt{x}}{y^3})$$
$$\left(\frac{\sqrt{x}}{y^3}\right)$$
image.png
等式
$$\begin{array}{rl}a& =b+c\\ & =d+e+f+g\\ & =h+i\end{array}$$
image.png
4.2 矩阵
$
\begin{matrix}
1 & x & x^2 \
1 & y & y^2 \
1 & z & z^2 \
\end{matrix}
$ , $
\begin{pmatrix}
1 & 2 \
1 & 2 \
\end{pmatrix}
$ , $
\begin{bmatrix}
1 & 2 \
1 & 2 \
\end{bmatrix}
$ , $
\begin{Bmatrix}
1 & 2 \
1 & 2 \
\end{Bmatrix}
$ , $
\begin{vmatrix}
1 & 2 \
1 & 2 \
\end{vmatrix}
$ , $
\begin{Vmatrix}
1 & 2 \
1 & 2 \
\end{Vmatrix}
$
image.png
省略元素 \cdots ? \ddots ? vdots ?

$$\begin{array}{ccccc}{a}_{11}& a_{12}& a_{13}& ?& a_{1n}\\ a_{21}& a_{22}& a_{23}& ?& a_{2n}\\ ?& ?& ?& ?& ?\\ a_{n1}& a_{n2}& a_{n3}& ?& 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)$$
image.png

上下行的间距调整 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}$$
image.png
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}$$
image.png
继续用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}$$
image.png
4.3 颜色
$blackText$，$grayText$
$silverText$，$whiteText$

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

5. 流程图
   5.1 简单流程图
   st=>start: Start:>https://www.zybuluo.com
   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
更多语法参考：
流程图语法参考

5.2 序列图
Title: Here is a title
A->B: Normal line
B–>C: Dashed line
C->>D: Open arrow
D–>>A: Dashed open arrow
更多语法参考：序列图语法参考
5.3 mermaid 甘特图
甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。

gantt

title 项目开发流程
section 项目确定
    需求分析       :a1, 2016-06-22, 1d
    可行性报告     :a2, after a1, 1d
    概念验证       :a3, after a2, 1d
section 项目实施
    概要设计      :2016-07-05  , 5d
    详细设计      :2016-07-08, 10d
    编码          :2016-07-15, 10d
    测试          :2016-07-22, 5d
section 发布验收
    发布: 2d
    验收: 3d

更多语法参考：mermaid参考
image.png
5.4 puml 序列图

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

image.png
Hi 这里是一个注脚，会自动拉到最后面排版 ?

23人点赞
猿人基本功

作者：siriusing
链接：https://www.jianshu.com/p/fd761fc43753
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。