markdown学习笔记（快速扫盲）

markdown入门笔记

0. 前言

• 参考书籍《了不起的Markdown》

1. Markdown简介

• Markdown是由John Gruber在Aaron Swartz的帮助下开发的标记语言，发布于2004年;
• Markdown是由一些简单的符号，组成的用于排版的标记语言,相当于简化了的HTML语言,让使用者专注于写作;
• Markdown文档支持HTML标记语言的内嵌，用于处理一些特殊需求，如图像的排版;
• Markdown本身功能有限，为了满足日益增加的使用场景，产生了许多扩展语法，在基础语法之上新增了表格，任务列表，围栏代码块等功能;
• Markdown源码实现的文档可以由不同的编辑器，生成各种不同的格式（如PDF，图片等）;
• Markdown不同的实现，催生了CommonMark规范的发布（2012年）,2017年GitHub基于规范标准发布了GitHub Flavored Markdown(简称GFM),是目前使用的最广泛的扩展版本;

综上所述,学习Markdown的几点建议:

• 掌握Markdown的基本语法;
• 掌握一门通用的基于CommonMark规范的扩展版本，如GFM;
• 选择一个合适的编辑器用于渲染解析源码(如vscode,Typora等);

2. Markdown基础语法

同一种效果可以由多种方式去实现，类似茴香豆的多种写法，以下每种效果的规范只介绍最常使用的方式，有兴趣的朋友可以读下原书。

2.1 标题

语法如下所示：

# + 空格 + 标题内容

注意事项：

• #号的个数表示了标题的等级;
• Markdown中最多支持六级标题(一级标题最大，既使用一个#);
• 建议标题的前后都空一行，（标题在文档开头除外）;

2.2 粗体和斜体

语法如下所示：

粗体：

** + 内容 + **

斜体：

* + 内容 + *

注意事项：

• 倾斜加粗的效果可以使用*** + 内容 + ***的方式表示;

2.3 段落与换行

语法如下所示：

段落：

• 如果行与行之间没有空格，则会被视为同一段落;
• 如果行与行之间有空行，则会被视为不同的段落;
• 空行是指行内什么都没有，或者只有空格和制表符;

换行：

空格 + 空格 + 回车

2.4 列表

语法如下所示：

有序列表：

数字符号 + 英文句号 + 空格 + 列表内容

无序列表：

- + 空格 + 列表内容

注意事项：
列表支持相互嵌套：

第一层列表
TAB + 第二层列表
TAB + TAB + 第三层列表

实例：

1. 动物
   • 猫
     • 大花猫
     • 小花猫
   • 狗
2. 植物
   • 树
   • 花

2.5 分割线

语法如下所示：

---

注意事项：

• 分割线需要使用至少3个以上的-来标记;
• 行内不能有其他的字符;
• 可以在标记符中间加上空格;

2.6 图片和链接

语法如下所示：

图片：

![图片替代文字](图片地址)

链接：

• 文字链接

[链接文字](链接地址)

• 引用链接

引用链接可以使得源码排版更为简洁，易读

[链接文字](链接标记)
[链接标记]: 链接地址

实例：

[百度][百度地址]  

[百度地址]: https://www.baidu.com

百度

• 网址链接

实例：

https://www.baidu.com

在扩展语法中，以www或http://开头的URL地址会被自动识别，通过使用行内代码语法包裹url可以避免被自动识别为网址链接。

2.7 行内代码和代码块

语法形式如下所示：

行内代码：

`内容`

代码块：

基本语法中代码块的形式通常以TAB或者四个空格的形式开头，但是通常使用扩展语法中的围栏代码块用于代替这种不易读写的表达方式。详情请查看扩展语法中的围栏代码块一节。

print("hello python3")

2.8 引用

语法形式如下：

> 引用内容

注意事项：

• 多行引用也可以在每一行的开头都插入>;
• 在引用中可以嵌套引用;
• 在引用中可以使用其他markdown的语法;
• 引用时建议以> + 空格 + 引用内容的方式来进行书写。

2.9 转义

转义的作用是：想在Markdown文件中插入一些标记符号，但又不想让这些符号被渲染时，可以使用转义字符的形式，\ + 特殊字符

3 扩展语法GFM

3.1 删除线

语法形式如下下所示：

~~ + 被删除的文字 + ~~

实例：

~~我在疯狂的copy~~

我在疯狂的copy

3.2 表情符号

语法形式如下下所示：

:表情代码:

更多的表情代码参考：
http://www.webpagefx.com/tools/emoji-cheat-sheet/

实例：

:smile:

3.3 表格

语法形式如下所示：

| 表头1 | 表头2 | 表头3 |
| ----- | ----- | ----- |
| 内容1 | 内容2 | 内容3 |
| 内容1 | 内容2 | 内容3 |

注意事项：

• 表头和请他行使用-来分隔;
• 在分隔行中的-结尾或者开头添加:可以控制表格的对齐方式，开头加左对齐，结尾加右对齐，两端加居中对齐;
• 引用区块和代码块不能插入到表格当中去;
• 表格中的分隔符号-数量是不限制的。

实例：

| 序号  | 性别  |    姓名    |
| :---: | :---: | :--------: |
|   1   |  女   | Angelababy |
|   1   |  女   |   佟丽娅   |

序号	性别	姓名
1	女	Angelababy
1	女	佟丽娅

3.4 任务列表

语法形式如下所示：

- + [ + 空格 + ] + 内容
- + [+ x + ] + 内容

实例

- [ ] 今日是否完成戒烟目标
- [x] 今日是否给老婆请安

• 今日是否完成戒烟目标
• 今日是否给老婆请安

3.5 围栏代码块

语法形式如下所示：

```语言名称

代码片段

```

注意事项：

• 加入语言名称后，编辑器会提供语法高亮;

实例：

```python

print(“hello python3”)

```

print("hello python3")

3.6 锚点

语法形式如下：

[锚点描述](#锚点名)

实例：

[回到顶部](#markdown基本语法学习)

回到顶部

注意事项：

• 锚点名称中不能含有空格，也不能含有特殊字符;
• 不适用html时，通常锚点就是markdown中的标题;
• 如果使用其他的锚点，可以结合html进行内嵌操作;

4. 编辑器

4.1 常使用的编辑器

比较经常使用的两个编辑器是Typora和vscode,在参考的书籍中作者介绍了很多编辑器，这里只针对vscode涉及到的操作进行记录，有兴趣的朋友可以读读原书。

vscode本身对于markdown的支持只包含一些简单的语法解析，如任务列表，表情代码都是不支持的，所有需要通过插件的方式对vscode进行扩展。

4.2 vscode中搭配的markdown插件

1. 提供智能感知和快捷操作的插件：Markdown All in One
   • 格式化表格(依托于vscode,ALT + SHIFT + F);
   • 图片路径自动联想;
   • 自定义代码片段(依托于vscode);;
2. 提供语法检查的插件：markdownlint
3. 提供增强预览和更多扩展语法的插件：Markdown Preview Enhanced
   • 在预览界面按Esc键可以调出标题大纲界面;
   • 该插件还支持Typora中的数学公式，流程图等功能;
   • 支持文件引入功能;
     • 通过MPE插件可以进行文件的引用,支持引用.md, .html, .pdf, .png等格式的文件;
     • 引入格式为：@import "文件名"
4. 从剪切板直接粘贴图片的插件：Paste Image
   • 在windows上使用Snipaste软件结合这个插件非常爽，F1截图->选择粘贴到剪切板->ctrl + alt + v直接粘贴到vscode正在编辑的markdown源码中;
   • 插入的图片在源文件的同级目录下;

4.3 工具支持的其他的扩展语法

虽然我们在上面的内容中了解基本的markdown语法和GFM扩展语言,但是一些比较有用的特殊的扩展语法我们也可以进一步了解一下，typora中的一些比较有用的扩展语法，在vscode中也可以通过MPE插件获取，所以接下来我们理解一下Typora中的一些常用的语法：

• 高亮语法：== + 内容 + ==, 实例：此处高亮
• 下划线： + 内容 + , 实例：此处添加下划线
• 上标： 底部内容 + ^ + 上标内容 + ^, 实例： x²
• 下标： 底部内容 + ~ + 上标内容 + ~, 实例： H₂O
• 数学公式： $ + 数学公式 + $, 实例：$f(x,y)=\frac{x^2}{y^3}$
• 支持注释内容，注释的形式采用html的注释方式
• 通过使用[TOC]我们还可以生成目录，前面的内容写好后直接回车，就会在当前内容区生成目录
• 脚注功能¹

脚注功能[^这是一个脚注功能]
[^这是一个脚注功能]: 描述该行内容

Typora中还支持图表功能，但是我们通常使用其他程序去绘制图表，然后引入到markdown当中，所以这里不介绍图表功能的实现，我们接下来具体说明下内嵌html功能和数学公式表示功能。

4.4 内嵌html语法

在markdown的文件当中直接使用html标签既可以达到内嵌html标签的效果。

4.5 数学公式

在markdown中引入数学公式主要是两种方式，前面介绍的行内，以及块级，语法格式如下所示：

$$
LaTeX 数学式  
$$  

Markdown中可以直接插入LaTeX数学式,具体的用法请查看以下博客

具体内容可转至该博客查看：https://www.cnblogs.com/nowgood/p/Latexstart.html

5. 总结

• 通过书上面的介绍我们初步认识了markdown的相关知识，从基础语法，流行的GFM语法，以及工具的扩展语法，都有涉及，基本涵盖了日常写博客和写操作文档的需求。
• 关于markdown更深层次的内容需要我们在日后花费更多的时间去探索和研究。
• 当然在写markdown时如果想要达到美观的效果，花费心思去专研排版，也是必须的，否则可能跟我一样，看起来有点一言难尽。

---

1. 描述该行内容 ↩︎