Markdown高阶教程

想必在大家看这篇文章前，就已经看了我以前的 Markdown 基础教程（没看的点这里）

从此以后，笔者写博客都会用Markdown，简直太方便了🙂

正文

1. 常用HTML标签

---

大家都知道，某些HTML标签是可以用在Markdown里的，接下来就跟大家说说Markdown里常用的HTML标签

1 删除线<del>Text</del> 或 ~~Text~~

2 上标<sup>Text</sup>或^Text^

3 下标<sub>Text</sub>或~Text~

4 一条线<hr>、---、***

5 段落（如果你不需要跳转，可以不写这个）<p>Text</p>

6 链接<a href="链接">Text</a>或[Text](链接)

2. 引用

---

引用一段文本只需在段落前加>

例：

引用

> 引用

3. 表格

---

表格（Table），是Word里一个重要的功能

而在 Markdown 里，也具备表格语法

例：

Name	Age	Favorite
Author	（不透露）	Programming, Blogging

| Name   | Age        | Favorite                   |
| ------ | ---------- | -------------------------- |
| Author | （不透露）  | Programming,  Blogging |

4. 脚注

---

脚注（Footnotes），就是批注

当你的鼠标指上去时，就会显示

你好[^脚注]
[^脚注]: 这是一个脚注

5. 图片

---

在Markdown里，也可以插入图片，例：

（图片地址：http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg）

写法：

![显示名称](图片地址、路径)

6. Emoji表情

---

Emoji 想必大家都知道，一些输入法里会自带一些

而在 Markdown 里，同样也有 Emoji，例如：🙂

写法：:Emoji英文名:

比如🙂的英文名就是slightly_smiling_face

所以，你只要输入:slightly_smiling_face:，就会出现🙂

在 Typora 编辑器中，你可以输入:加一个首字母，便会出现一些候选选项

Typora官网

7. 视频

---

视频（video），只需要用一个HTML标签就OK了

<video src="xxx.mp4">

8. Emoji常用表情英文

---

👍 +1

👎 -1

😄 smile

🙁 slightly_frowning_face

🙂 slightly_smiling_face

😦 frowning

☹️ frowning_face

✔️ heavy_check_mark

❌ x

📧 e-mail

❤️ heart

⭕️ o

9. 任务

---

在 Markdown 里，任务说白了就是复选框

• 已完成任务
• 未完成任务

- [X] 已完成任务
- [ ] 未完成任务

当然这个复选框是可以点的，但是只有编辑时可以点，而代码会相应地补上X或去掉X

10. 目录

---

目录的写法非常简单，你只需在要插入的地方输入[toc]，就会自动生成一个目录，并把所有标题链接插入
例如文章开头时的目录
在 CSDN 中，若你编辑时写了[toc]，CSDN 会自动转换成@[toc]

11. Flow 流程图

---

相信新手在写学习写代码前，都见过这样的流程图

或更复杂一点的

写法：

​```mermaid
flowchat
startID=>start: 开始
endID=>end: 结束
inputID=>inputoutput: 输入
outputID=>inputoutput: 输出
condID=>condition: 条件
sub=>subroutine: 子流程
operID=>operation: 操作

startID->inputID->condID
condID(yes)->outputID->end
condID(no)->end
​```

点这里跳转到 Flow 详细教程（这里借鉴了别人的教程）

12. 嵌入图片

---

Markdown有一个好处，就是可以插入图片，但插入的图片一般有很大的局限性，例如：

• 本地插入的图片在发布时必须使用相对路径，并且要和图片一起发布
• 网站上的图片必须确保网络情况良好

对此，在Markdown里就有一种新的方法来插入图片
这种方法会将图片嵌入进Markdown文档里，不需要担心上面的问题，接下来就教大家怎么做

1. 将图片转为base64编码（图片推荐用png格式）
你可以使用python，或者使用这个在线base64工具

import base64
f = open('路/径/图片.png', 'rb')
code = base64.b64encode(f.read())
f.close()
print(code)

这样，就可以实现将png转为base64编码

---

踩坑警告：
利用python的方法转换时，会自动在开头生成b'，在结尾生成'，务必将这两处删去

---

2. 使用以下格式

![alt text][xxx]
[xxx]:data:image/png;base64,<base64 code>

其中，xxx可以为任意合法内容
<base64 code>为base64编码
如果你使用的图片不是png格式，那么请将image/png改成image/(你的图片格式)，例如image/jpg
PS: 如果你使用的是上面给的在线工具，那么直接这样写：

![alt text][xxx]
[xxx]: <DataURI>

<DataURI>是那个网站下方的选择图片文件来获取它的 Base64 编码的 DataURI 形式转换出来的一坨东西

3. 大功告成！
你已经成功在Markdown中插入了图片

一个实用的例子

比如还是 5. 图片 中的示例图片：

我将它转换为base64码（由于码太太太长了，点击此处查看）
然后再插入进去（由于CSDN太卡，这里用Typora举例）：

怎么样，是不是很简单？
接下来我把我的python代码放上来，大家可以直接复制使用
（生成的代码没有b'前辍和'后辍）

# imgb64.py
# 用来将图片转换为 base64 编码
# 输出文件：当前目录下 b64code.txt
import base64
f = None
while 1:
    try:
        name = input('Input image file name: ')
        f = open(name, 'rb')
    except (FileNotFoundError):
        print('File not found! Please retry')
    except (KeyboardInterrupt):
        print('\nCtrl-C has pressed, program is exiting...')
        exit()
    else:
        break
encode = open('b64code.txt', 'w')
code = base64.b64encode(f.read())
f.close()
str = code.__str__().lstrip('b\'').rstrip('\'')
print(str, file=encode)
# print(code)
print('base64 code --> .\\b64code.txt')
encode.close()

13. 列表

---

PS: 这里讲的列表可不是表格
在Markdown中有3种列表：

• 有序列表
• 无序列表
• 自定义列表

首先是有序列表，在Markdown中输入1.、2.、3.等等就行了

1. 例子1
2. 例子2
3. 例子3
4. 例子4

1. 例子1
2. 例子2
3. 例子3
4. 例子4

普通的1.的打法：

1\.

无序列表要加上一个星花*或短横（减号）-

• 例子
• 又是例子
• 还是例子
• 没完没了的例子

* 例子
* 又是例子
* 还是例子
* 没完没了的例子

自定义列表要先输入一个标题，再输入:，加上内容：

Credits

John

Mike

UI Designer

Xiao Ming

Credits
: John
: Mike

UI Designer
: Xiao Ming