【技能拾遗】——Markdown+Typora/VSCode与LaTeX的使用

📖 前言：Markdown 是一种轻量型标记语言，是一种语法. 以 .md 结尾的文本文件就是 Markdown 文件。相较于 Word，它更加像是 HTML 语言或是 $\LaTeX$ ，并不是最淳朴的那种"所见即所得"。它处处透露着一种极简主义。高效简洁清晰的同时，又很简单。看起来舒服，语法简单，尤其在处理纯文本上有很大的优势。

它相较于 Word，兼容性非常高，可以跨平台使用，不用担心奇奇怪怪的版本兼容问题。它可以让你不再纠结什么字体，什么样式，什么排版。而且逻辑清晰，层次分明。同时，有许多网站都支持或正在使用 Markdown 语法。如 Github （等一系列代码托管平台），StackOverflow（等答疑平台），简书、语雀、CSDN （等一系列笔记平台）。

在这里插入图片描述

🕒 1. 工具
- 🕘 1.1 Typora
- 🕘 1.2 VS Code
🕒 2. 基础教程
- 🕘 2.1 标题 [数个 "#" + 空格前置]
- 🕘 2.2 强调 [用 "**" 或 "__" 包围]
- 🕘 2.3 斜体 [用 "*" 或 "_" 包围]
- 🕘 2.4 删除线 [用 "~~" 包围]
- 🕘 2.5 *高亮 [用 "==" 包围]
- 🕘 2.6 代码 [用 "`" 包围]
- 🕘 2.7 代码块 [按三个 "`" 并敲回车]
- 🕘 2.8 引用 [">" + 空格前置]
- 🕘 2.9 无序列表 ["-" 或 "+" + 空格前置]
- 🕘 2.10 有序列表 [数字 + "." + 空格前置]
- 🕘 2.11 *上标 [用 "^" 包围]
- 🕘 2.12 *下标 [用 "~" 包围]
- 🕘 2.13 图片 [直接拖进来或者复制粘贴]
- 🕘 2.14 *注释 ["[^]" 后置]
- 🕘 2.15 链接 [常用 "[ ]" + "( )" 分别包围文本与链接]
- 🕘 2.16 任务列表 ["- [ ]" + 空格前置]
- 🕘 2.17 表格 [用 "|" 绘制表格边框]
- 🕘 2.18 Emoji表情 [":" 前置]
- 🕘 2.19 换行 [敲回车或中间加`<br>`或`<p>`]
- 🕘 2.20 分割线 [按三个 "*" 或 "-" 或 "_" 并敲回车]
🕒 3. 进阶教程
- 🕘 3.1 目录 [自动生成]
- 🕘 3.2 内联 HTML 代码 [用 "<> </>" 包围]
- 🕘 3.3 表格进阶应用（基于LaTeX或HTML）
- 🕘 3.4 内联 $\LaTeX$ 公式 [用 "$" 包围]
- 🕘 3.5 *网络图床
- 🕘 3.6 *Typora 的常用快捷键
- 🕘 3.7 *Typora 的主题样式与检查元素
💯 总结

🕒 1. 工具

Markdown 只是一种语法。那么用来写 Markdown 的文本编辑器呢？这里推荐的是 Typora 或者 VS Code

🕘 1.1 Typora

中文官网： 🔎 Typora 官方中文站

Typora 是使用最为广泛的 Markdown编辑器，有很实用的扩展语法与自定义样式的功能，流畅度和反应速度都很快。Typora 支持实时预览，不同于左右两个窗口的编辑器，它将「写字」和「预览」这两件事情合并了，Typora的设计理念就是极致简洁，编辑后直接渲染出效果以“即时预览”，如果要修改已经写好的Markdown标记可以切换到“源代码模式”。此外，其能将 .md 导出成多种文件，如 .pdf, .html, .docx 等。

由于 Typora 于21年底正式变为收费软件，我们可以发挥钞能力，或者使用破解版（目前beta版已经寄了）。

🕘 1.2 VS Code

这是微软家的开源文本编辑器，理论上来说所有代码、语言，都可以用 VS Code 来写，同样是非常的简洁好用。在下载插件 Markdown All in One 后对 Markdown 的基础支持也是非常的好。若在 VS Code 下载 Markdown 各种附加扩展，就能获得比 Typora 更加丰富的扩展语法与操作。

大部分IDE，像 Jetbrain 的全家桶里应该每一款，都支持 Markdown 语法，在此不多赘述。

本文档主要使用 CSDN平台集成的编辑器进行演示，同时介绍 Typora 的差异与扩展语法。

🕒 2. 基础教程

标题有 * 表示该为扩展语法，仅在 Typora 或添加了扩展的 VS Code 本地生效，在部分平台上并不认可。

当有多种标记方法时，建议倾向其中一种。

🕘 2.1 标题 [数个 “#” + 空格前置]

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

标题会在目录与大纲分级显示，可以跳转。

在 Typora 中建议开启 严格模式，即不应为 #标题，应为 # 标题。应该要手动补上空格，使得 Markdown 语法在其他文本编辑器上兼容。

🕘 2.2 强调 [用 “**” 或 “__” 包围]

**全体目标向我看齐！**  （建议这种）
__全体目标向我看齐！__

或者选中想要强调的文字按下 Ctrl + B。

E.G.

全体目标向我看齐！

🕘 2.3 斜体 [用 “*” 或 “_” 包围]

*我不吃牛肉* （建议这种）
_我不吃牛肉_

或者选中想要强调的文字按下 Ctrl + I.

E.G.

我不吃牛肉

（P.S. 斜体并强调 [用 “***” 或 “___” 包围]）

🕘 2.4 删除线 [用 “~~” 包围]

~~兄弟你好香~~

E.G.

~~兄弟你好香~~

🕘 2.5 *高亮 [用 “==” 包围]

==划重点，敲黑板啦==

E.G.

划重点，敲黑板啦

🕘 2.6 代码 [用 “`” 包围]

`sudo rm -rf /*`

E.G.

sudo rm -rf /*

🕘 2.7 代码块 [按三个 “`” 并敲回车]

```c
// 这里就可以开始输入你要的代码了
#include <stdio.h>
int main()
{
   printf("Hello, World!");
   return 0;
}
```

E.G.

// 这里就可以开始输入你要的代码了
#include <stdio.h>
int main()
{
   printf("Hello, World!");
   return 0;
}

要想显示行数的话，一般要在 Typora 的设置里勾上这个显示行数的选项。

代码块里可以选择语言，其会根据语言来自动高亮各个语句。

```会变为 `````+ 对应语言.

🕘 2.8 引用 [“>” + 空格前置]

> 十分甚至九分
> > homo特有的意义不明(恼)

引用是可以嵌套的。

E.G.

十分甚至九分

homo特有的意义不明(恼)

🕘 2.9 无序列表 [“-” 或 “+” + 空格前置]

- 一颗是枣树 （建议这种）
  + 另一颗还是枣树
* (其实这种也可以，不过由于在 Typora 中很难单个输入，故不常用)

三种前置符都可以，敲回车会自动补全，可在 Typora 设置中调整补全的符号，敲回车后按下 Tab 或空两格会缩进一级。

E.G.

一颗是枣树
- 另一颗还是枣树

🕘 2.10 有序列表 [数字 + “.” + 空格前置]

我来这里就为了三件事：
1. 公平
2. 公平
3. 还是tm的公平！

敲回车会自动补全，敲回车后按下 Tab 会缩进一级。

E.G.

我来这里就为了三件事：

公平
公平
还是tm的公平！

🕘 2.11 *上标 [用 “^” 包围]

C语言中int的上限是 2^31^ - 1 = 2147483647

E.G.

C语言中 int 的上限是 2³¹ - 1 = 2147483647

🕘 2.12 *下标 [用 “~” 包围]

众所周知，H~2~O 是剧毒的！

E.G.

众所周知，H₂O 是剧毒的！

🕘 2.13 图片 [直接拖进来或者复制粘贴]

如果是像CSDN这里复制，本质是将图片上传至CSDN的图床上。而 Typora 设置里可以修改图片的储存方式（本地or配置图床）。

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f0d278db9196433c81b63074e9cb052c.png)

E.G.
在这里插入图片描述

🕘 2.14 *注释 [“[^]” 后置]

> 第一.开一家正新鸡排
第二.旅游景点：我在凹处很想你
第三.找二舅妈借几个膨胀螺丝
第四.租给香港人5000一个月
第五.人格启动[^1]

[^1]: 沃兹·基·硕德 改编自TikTok。

需要在文末写上注释对应的内容

E.G.

第一.开一家正新鸡排
第二.旅游景点：我在凹处很想你
第三.找二舅妈借几个膨胀螺丝
第四.租给香港人5000一个月
第五.人格启动¹

🕘 2.15 链接 [常用 “[ ]” + “( )” 分别包围文本与链接]

（注意: 文内跳转为扩展用法）

[我的博客主页](https://blog.csdn.net/HinsCoder)
[基础教程: 5. 高亮](## 🕘 2.5 *高亮 [用 "==" 包围])

支持网页链接与文内跳转，按住 Ctrl 并 单击鼠标左键 即可跳转（Typora）。

E.G.

我的博客主页

[基础教程: 5. 高亮](## 🕘 2.5 *高亮 [用 “==” 包围])

🕘 2.16 任务列表 [“- [ ]” + 空格前置]

TodoList:
- [ ] 刷B站
- [ ] 写代码
- [x] 起床

用 x 代替 [ ] 中的空格来勾选任务列表，在 Typora 中可以直接用鼠标左键单击勾选框。

E.G.

TodoList:

刷B站
写代码
起床

🕘 2.17 表格 [用 “|” 绘制表格边框]

| Cno | Cname | Ccredit |
| :--- | :---: | ---: | (引号的位置代表着 左对齐, 居中, 右对齐)
| 1001 | 高等数学 | 9 |
| 1002 | C语言程序设计 | 3.5 |
| 1006 | 数据库\_Oracle大型数据库 | NULL |
| 1010 | 人工智能与机器学习 | NULL |

第一行为表头，并由第二行分割线决定对齐方式与长度，第三行及之后即表格数据

E.G.

Cno	Cname	Ccredit
1001	高等数学	9
1002	C语言程序设计	3.5
1006	数据库_Oracle大型数据库	NULL
1010	人工智能与机器学习	NULL

如果有现成的Excel表格，可以通过 🔎 在线表格转换工具进行Markdown的转换。

如果有表格的截图，可以通过 🔎 在线图片转表格进行Excel的转换，之后再用上面的工具进行Markdown的转换。

注：关于表格的格式

格式化Markdown：

| Cno | Cname | Ccredit |
|------|------------------|---------|
| 1001 | 高等数学 | 9 |
| 1002 | C语言程序设计 | 3.5 |
| 1006 | 数据库_Oracle大型数据库 | NULL |
| 1010 | 人工智能与机器学习 | NULL |

使用精简格式

Cno | Cname | Ccredit
—|—|—
1001 | 高等数学 | 9
1002 | C语言程序设计 | 3.5
1006 | 数据库_Oracle大型数据库 | NULL
1010 | 人工智能与机器学习 | NULL

这些建议都不要用，不规范。

🕘 2.18 Emoji表情 [“:” 前置]

(注意: 英文输入为扩展语法)

:sweat_smile: 
:drooling_face:
:clown_face:
// (敲回车或者鼠标点击, 后置的":"一般不需要手动输)

这个功能唯一的要求就是英语水平要高,，或者大概记得各个 Emoji 的英文名。

E.G.

😅
🤤
🤡

对于其余普通的 Markdown 文本编辑器，可以直接将 Emoji 表情复制进来，这是直接硬编码的（~~刻进DNA里~~）

E.G.

😅🤤🤡

用好Emoji可以让文章有趣味的同时更清晰明了，比如我的习惯会在链接处加一个🔎 ，这样能清晰标注这是一个链接。

这里分享一个可以复制🔎 全Emoji的网站。

🕘 2.19 换行 [敲回车或中间加`<br>`或`<p>`]

秀<br>很秀<br>陈独秀<p>蒂花之秀

E.G.

秀
很秀
陈独秀

蒂花之秀

🕘 2.20 分割线 [按三个 “*” 或 “-” 或 “_” 并敲回车]

***
--- （建议这种）
___
// （其实按三个及以上都可以）

由于 * 与 _ 均会自动补全，所以我觉得 - 最为方便。

E.G.

🕒 3. 进阶教程

🕘 3.1 目录 [自动生成]

[TOC] （Typora 特有）
@[TOC](目录)   （CSDN编辑器特有）

若使用 VS Code 搭配 Markdown All in One 扩展，可在 VS Code 的命令面板 (即 VS Code Command Palette) 输入 Create Table of Contents 自动生成目录，且可在扩展设置中细调目录参数。

🕘 3.2 内联 HTML 代码 [用 “<> </>” 包围]

<div style="text-align:center">
  <font style="color:red"> HTML 好难学...</font>		// 红色文本居中，目前仅Typora可用
</div>

<center><font color=red size=5><b>简单的5号红色文本居中</b></font></center>

<u>我差点忘了还有下划线这东西...</u>

只要你会写, 你完全可以把 Markdown 当作 HTML 来写.

同时, .md 文件可以直接导出成一个网页.

下划线可以选中想要下划的文字按下 Ctrl + U.

E.G.

简单的5号红色文本居中

我差点忘了还有下划线这东西…

关于空格：

  它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
&ensp; 它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
&emsp; 它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

如果需要自定义长度，可以在LaTeX中使用\hspace{[数字]em}

$F=A(B+\overline{C}) \hspace{6em} F^{*}=A+(B\overline{C})$

E.G.

$F=A(B+\overline{C}) \hspace{6em} F^{*}=A+(B\overline{C})$

🕘 3.3 表格进阶应用（基于LaTeX或HTML）

如果使用原生Markdown表格感觉有点占空间（内容少的时候），可以考虑 $\LaTeX$ 表格：

原Markdown表格：

链路带宽	成本值
4 Mb/s	250
10 Mb/s	100
16 Mb/s	62
100 Mb/s	19
1 Gb/s	4
10 Gb/s	2

$\begin{array}{|c|c|}
\hline {\text { 链路带宽 }} & \text { 成本值 } \\
\hline  4 Mb/s & 250 \\ 
\hline  10 Mb/s & 100 \\
\hline  16 Mb/s & 62 \\ 
\hline  100 Mb/s & 19 \\
\hline  1 Gb/s & 4 \\
\hline  10 Gb/s & 2 \\
\hline
\end{array}$

E.G.

$\begin{array}{|c|c|} \hline {\text { 链路带宽 }} & \text { 成本值 } \\ \hline 4 Mb/s & 250 \\ \hline 10 Mb/s & 100 \\ \hline 16 Mb/s & 62 \\ \hline 100 Mb/s & 19 \\ \hline 1 Gb/s & 4 \\ \hline 10 Gb/s & 2 \\ \hline \end{array}$

当表格需要合并单元格时，LaTeX理论上支持，但实际很难，建议使用HTML。

单元格合并方式：

跨行合并：垂直方向上的上下单元格合并是跨行合并，在 <td> 单元格标签中使用 rowspan 属性 , 设置跨行合并单元格数；
跨列合并：水平方向上的左右单元格合并是跨列合并，在 <td> 单元格标签中使用 colspan 属性 , 设置跨列合并单元格数 ;

<table>
    <tr>
        <th>类型</th>
        <th>功能</th>
        <th>报文类型</th>
        <th>报文代码</th>
    </tr>
    <tr>
        <td rowspan="4">链路配置</td>
        <td rowspan="4">建立和配置链路</td>
        <td>Configure-Request</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Configure-Ack</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Configure-Nak</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Configure-Reject</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="2">链路终止</td>
        <td rowspan="2">终止链路</td>
        <td>Terminate-Request</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Terminate-Ack</td>
        <td>6</td>
    </tr>
    <tr>
        <td rowspan="5">链路维护</td>
        <td rowspan="5">管理和调试链路</td>
        <td>Code-Reject</td>
        <td>7</td>
    </tr>
    <tr>
        <td>Protocol-Reject</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Echo-Request</td>
        <td>9</td>
    </tr>
    <tr>
        <td>Echo-Reply</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Discard-Request</td>
        <td>11</td>
    </tr>
</table>

E.G.

类型	功能	报文类型	报文代码
链路配置	建立和配置链路	Configure-Request	1
		Configure-Ack	2
		Configure-Nak	3
		Configure-Reject	4
链路终止	终止链路	Terminate-Request	5
链路终止	终止链路	Terminate-Ack	6
链路维护	管理和调试链路	Code-Reject	7
		Protocol-Reject	8
		Echo-Request	9
		Echo-Reply	10
		Discard-Request	11

🕘 3.4 内联 $\LaTeX$ 公式 [用 “$” 包围]

（注意: 部分编译器会不识别部分符号）

🔎 LaTex常用数学符号大全

🔎 Markdown/LaTeX 数学公式和符号表

强烈推荐这个网站：🔎 LaTeX在线编辑器与图像公式识别

🔎 公式/文档识别

$\LaTeX$ 是最好用的论文排版语言！不信你看！

$a^n+b^n=c^n$

$$
%\usepackage{unicode-math}
\displaystyle \ointctrclockwise\mathcal{D}[x(t)]
\sqrt{\frac{\displaystyle3\uppi^2-\sum_{q=0}^{\infty}(z+\hat L)^{q}
\exp(\symrm{i}q^2 \hbar x)}{\displaystyle (\symsfup{Tr}\symbfcal{A})
\left(\symbf\Lambda_{j_1j_2}^{i_1i_2}\Gamma_{i_1i_2}^{j_1j_2}
\hookrightarrow\vec D\cdot \symbf P \right)}}
=\underbrace{\widetilde{\left\langle \frac{\notin \emptyset}
{\varpi\alpha_{k\uparrow}}\middle\vert
\frac{\partial_\mu T_{\mu\nu}}{2}\right\rangle}}_{\mathrm{K}_3
\mathrm{Fe}(\mathrm{CN})_6} ,\forall z \in \mathbb{R}
$$

用 $ 包围为单条公式, 按下两个 $ 并敲回车即生成公式块.

E.G.

$\LaTeX$ 是最好用的论文排版语言！不信你看！

$a^n+b^n=c^n$

在这里插入图片描述

上述公式图像可以通过图像识别转为LaTeX，如下所示

在这里插入图片描述

$\oint \mathcal{D}[x(t)] \sqrt{\frac{3 \pi^{2}-\sum_{q=0}^{\infty}(z+\hat{L})^{q} \exp \left(\mathrm{i} q^{2} \hbar x\right)}{(\operatorname{Tr} \mathcal{A})\left(\Lambda_{j_{1} j_{2}}^{i_{1} i_{2}} \Gamma_{i_{1} i_{2}}^{j_{1} j_{2}} \hookrightarrow \vec{D} \cdot \mathbf{P}\right)}}=\underbrace{\left\langle\frac{\notin \emptyset}{\varpi \alpha_{k \uparrow}}\right| \frac{\partial_{\mu}}{2} T_{\mu \nu}}_{\mathrm{K}_{3} \mathrm{Fe}(\mathrm{CN})_{6}}, \forall z \in \mathbb{R}$

🕘 3.5 *网络图床

分享一个教程，但我还没实践过。

科普篇！什么是图床？会markdown必看！附图床免费资源

注：上面视频的插入格式如下，如果希望视频不自动播放需加上&autoplay=0：
[video(video-OT38T17U-1713230016161)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=381343934&autoplay=0)(image-https://img-blog.csdnimg.cn/img_convert/4c8274bca5adb68abbb0f47837e286d1.jpeg)(title-科普篇！什么是图床？会markdown必看！附图床免费资源)]

🕘 3.6 *Typora 的常用快捷键

按键	效果	按键	效果
`Ctrl` + `D`	选中当前词	`Ctrl` + `L`	选中当前句/行
`Ctrl` + `E`	选中当前区块	`Ctrl` + `F`	搜索当前选中
`Ctrl` + `B`	加粗当前选中	`Ctrl` + `H`	替换当前选中
`Ctrl` + `I`	倾斜当前选中	`Ctrl` + `U`	下划当前选中
`Ctrl` + `K`	将当前选中生成链接	`Ctrl` + `J`	滚动屏幕将选中滚至顶部
`Ctrl` + `W`	关闭当前窗口	`Ctrl` + `N`	打开新窗口
`Ctrl` + `O`	打开文件	`Ctrl` + `P`	搜索文件并打开
`Ctrl` + `回车`	表格下方插入行	`Ctrl` + `,`	打开偏好设置
`Ctrl` + `.`	切换全角/半角标点	`Ctrl` + `/`	切换正常/源代码视图
`Ctrl` + `Shift` + `-`	缩小视图缩放	`Ctrl` + `Shift` + `+`	放大视图缩放

还有一些不常用的/三键的快捷键不在此列出。

🕘 3.7 *Typora 的主题样式与检查元素

Markdown 在编译后约等于 HTML，而 Typora 的正常视图就是编译后的 Markdown，故Typora的主题样式本质就是 CSS 文件。

可以下载各种好看的主题给 Typora换上，同时也可以自己调整对应的 CSS 文件，或者自己手搓。

在 Typora 设置中开启 调试模式 后即可在正常视图右击打开 检查元素，在其中就可以完全将 Markdown 文件当成 HTML 来编辑。

💯 总结

至此，Markdown + Typora / VSCode 的手册教程也告一段落。

不知你看完这么长的教程/手册，是否能体会到 Markdown 的精妙简洁之处呢？

其实 Markdown 只是标记语言的最开始，我的感受是会了 Markdown 之后对于理解 HTML 也有帮助，对于用 $\LaTeX$ 来写论文也有帮助。标记语言正是为了摆脱 Word 那种虽然"所见即所得"，但又过于花哨浮华，很差的兼容性与闭源的编码的缺陷。当你能掌握这样的"所写即所得"时，你肯定会感受到用 Markdown 这类语言来处理文本的妙处！