Markdown-可靠的标记语言

本文最后更新于：2021年7月31日 晚上

创作声明：主要内容为互联网内容整合。

你为什么需要Markdown

Markdown 是一种轻量级标记语言，创始人为 John Gruber。它允许人们「使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者 HTML）文档」。——维基百科。简单地说，Markdown 与 HTML 语言一样，使用一些符号就代替样式，但是它比 HTML 语言更加简单，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
Markdown 的本质是让我们回归到内容本身，注重文章本身的结构，而不是样式。

Markdown环境搭建

市面上有许多Markdown解决方案，我选择使用VS Code+插件解决（一体化解决方案），VS Code的安装与使用不再赘述，以下必备插件：

Markdown All in One

这是个大一统型的扩展，集成了撰写 Markdown 时所需要的大部分功能，是 Markdown 类插件中下载榜榜首。可以认为是 VS Code 中的 Markdown 必备扩展。其功能涵盖：

  • 快捷键
    Ctrl + B 加粗
    Ctrl + I 斜体
    Alt + S 删除线
    Alt + C 勾选/取消勾选任务清单项目
    Ctrl + M开启LaTeX 数学公式编写
  • 自动生成并更新目录
    Markdown All in One 插件可以自动根据你正在编辑的文档，生成相应的目录。我们利用快捷键 Ctrl + Shift + P 调出「命令面板」，输入「目录」，即可直接调用命令「Markdown: 创建目录」。之后如果你更新了文章内容，也可以直接通过命令「Markdown：更新目录」更新。
  • 路径补全
    Markdown All in One 可以直接帮助我们补全本地图片的路径，这个功能非常方便，因此我也推荐将 Markdown 文档所需的图片素材保存在一个和源文件同一个路径的文件夹下，比如这一的安排方式就比较合理：
    .
    ├── 1 文章一
    │ ├── image/
    │ └── Post1.md
    ├── 2 文章二
    │ ├── image/
    │ └── Post2.md
    …
  • LaTeX数学公式支持
    Markdown All in One 直接提供了基于 LaTeX 的数学公式渲染，支持行内数学公式，以及整段的数学公式。

Markdown Preview Mermaid Support

由于我偶尔会使用 Markdown 绘制流程图、时序图或甘特图，因此我也会使用 Mermaid 渲染引擎来辅助我的绘制。这里 Markdown Preview Mermaid Support 这个插件就让 VS Code 的 Markdown 预览能够正确渲染 Mermaid 图，非常方便。

1
2
3
4
5
6
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

格式转换Pandoc

Pandoc 的下载可以去官网手动下载pandoc
也可以使用包管理器自动下载。
对 Windows 用户，有 Scoop 和 Chocolatey

1
2
scoop install pandoc
choco install pandoc

对 MacOS 用户，有 Homebrew

1
brew install pandoc

安装完毕后，在 VS Code 中安装相关扩展，这里首推 VS Code-pandoc（选 Chris 的那个），可以实现 .md 到 .pdf，.docx 和 .html 的转换。

进阶操作

VS Code 最强大的地方在于其无穷无尽的自定义功能。可能你觉得默认的 Markdown 预览风格并不符合你的口味，那么你可以直接在 VS Code 的设置中（快捷键 Ctrl + , 打开）自定义 Markdown 渲染使用的 CSS 样式文件： 

1
2
3
4
5
{  
    "markdown.styles": [
        "Style.css"
    ]
}

其中的 Style.css 就是更换默认 Markdown 渲染使用样式的 CSS 文件，这里需要填写你所使用文件的绝对路径。
VS Code 强大的插件系统，以及开源的方便性，让我们可以从几乎任何角度、利用各种手段去自定义我们的 Markdown 编写环境（比如自定义 VS Code 的 CSS 修改样式、自定义编译自动化将 Markdown 编译为 HTML、PDF 等）。更多进阶的操作功能，请直接参考微软官方的开发文档：Markdown and Visual Studio Code

Markdown常用操作

字体设置

这里显示正文 

1
2
3
4
5
*这里显示的是斜体*  
_这里显示的倾斜体_  
**这里显示的文字是加粗了**  
***这里的文字是倾斜加粗的***  
~~这里的文字是加下划线的~~

这里显示的是斜体
这里显示的倾斜体
这里显示的文字是加粗了
这里的文字是倾斜加粗的
这里的文字是加下划线的

分级标题
类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），任何数量的 = 和 - 都可以有效果。

例如：

1
2
3
4
这是一个一级标题
============================
二级标题
-----------

链接

  • 插入本地图片链接
    ![图片描述]（图片路径） 注：图片描述可以不写。 
    1
    2
    3
    如本地插入图片示范：
    ![插入下一层级目录下的图片](/短视频封面/083.jpg)
    ![插入同级目录下的图片](/原创扁平方盒-逐浪字体.jpg)
  • 插入互联网上图片

![图片描述]（图片网络路径） 注：图片描述与插入本地图片一样，描述可以不写。

1
![图片描述](https://www.baidu.com/images/1.jpg)
  • 自动连接
    Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>包起来， Markdown 就会自动把它转成链接。也可以直接写，也是可以显示成链接形式的。 链接内容定义的形式为：
    1
    2
    3
    [这是百度链接](http://www.baidu.com/ "欢迎访问百度").
    [这是百度链接](http://www.baidu.com/ '欢迎访问百度').
    [这是百度链接](http://www.baidu.com/ (欢迎访问百度)).
    这是百度链接.
  • 代码块
    对于程序员来说代码功能是必不可少的，插入程序代码的方式有两种，一种是利用缩进(tab), 另一种是利用英文“```”符号（一般在ESC键下方，和~同一个键）包裹代码。
    1
    2
    如果要标记一小段行内代码，你可以用反引号把它包起来（`），例如：
         Use the `printf()` function.

    分割线

    你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    * * *
    ​
    ***
    ​
    *****
    ​
    - - -
    ​
    ---------------------------------------

    引用

    在被引用的文本前加上>符号，以及一个空格就可以了，如果只输入了一个>符号会产生一个空白的引用。
    1
    2
    3
    4
    5
    > 文字引用 
    >
    > 文字引用 
    > 文字引用 
    > 文字引用

文字引用

文字引用
文字引用
文字引用 

1
2
3
>>>第一层嵌套引用
>>第二层嵌套引用
>第三层嵌套引用

第一层嵌套引用
第二层嵌套引用
第三层嵌套引用

列表

无序列表
使用 星号*，加号+，减号- 表示无序列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
* 无序列表文字
* 无序列表文字
* 无序列表文字
等同于：

+ 无序列表文字
+ 无序列表文字
+ 无序列表文字
也等同于：

- 无序列表文字
- 无序列表文字
- 无序列表文字
  • 无序列表文字
  • 无序列表文字
    …………
  • 有序列表*
    有序列表则使用数字接着一个英文句点。
    注意：英文句点后面一定要有一个空格，起到缩进的作用。
    1
    2
    3
    1. 有序列表
    2. 有序列表
    3. 有序列表
  1. 有序列表
  2. 有序列表
  3. 有序列表

无序列表和有序列表同时使用 

1
2
3
4
5
6
7
* 这是无序列表1
- 这是无序列表2
+ 这是无序列表3
1. 这是有序列表1 
2. 这是有序列表2
* 1. 有序无序混合使用1
+ 2. 有序无序混合使用2
  • 这是无序列表1
  • 这是无序列表2
  • 这是无序列表3
  1. 这是有序列表1
  2. 这是有序列表2
    1. 有序无序混合使用1
    1. 有序无序混合使用2

注意事项
在使用列表时，只要是数字后面加上英文的点，就会无意间产生列表，比如2020.5.25,这时候想表达的是日期，有些软件把它被误认为是列表。解决方式：在每个点前面加上\就可以了。如下图所示：2020. 05. 25. 今天是2020年5月25日显示如下： 2020. 05. 25. 今天是2020年5月25日。

表格

1
2
3
4
5
6
7
| name  | 111  |  222  |  333  |  444  |
| :-: | :--- |  ---: | :---: | :---: |
|  aaa  | bbb  |  ccc  |  ddd  |  eee  |
|  fff  | ggg  |  hhh  |  iii  |  000  |
:- 左对齐
:-: 居中
-: 右对齐
name 111 222 333 444
aa bbb ccc ddd eee
fff ggg hhh iii 000
生产力工具
Markdown VS Code

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议 ，转载请注明出处！