首页 > 其他分享> > Markdown修仙之道

Markdown修仙之道

2020-11-23 18:58:25 作者：互联网

Markdown修仙之道

文章目录

1 什么是Markdown
2 Markdown平台与软件
3 Markdown语法
4 Markdown与HTML
5 特殊符号与数学符号

1 什么是Markdown

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。Markdown语法简单，界面简洁，具有强大的排版功能，让编辑者更多关注内容本身，而不需要过多关注排版；Markdown功能甚多，在此列举markdown对以下几类使用者的优势：

程序员：全球的程序员几乎都在使用markdown做笔记，使用markdown可以大大地提高程序员学习和做笔记的效率，特别是markdown可以高亮显示各种语言的代码块，对程序员非常友好。
文员：语言简单，界面友好，无需排版，可更多的关注内容，输入方式体验极佳。
理工科：Markdown语法具有强大的拓展功能，比如表格、脚注、内嵌HTML等等，此外，markdown还支持Latex数学公式语法，可以快速编写数学公式，这对与理工科的朋友来说是非常友好的。

Markdown语法简单，仅需几十分钟即可入手。

2 Markdown平台与软件

2.1 Windows

VSCode、Atom、CuteMarkEd、MarkdownPad、Miu、Typora、RStudio

2.2 Linux

VSCode、Atom、Typora、ReText、UberWriter、RStudio

2.3 MAC

Byword、Day one、Editorial、Drafts 4、Matcha 3

2.4 浏览器插件

MaDo (Chrome)：Marxico（Chrome）

2.5 个人笔记

CSDN、简书、有道云笔记、印象笔记

推荐：

以上的编辑器中有免费的有收费的，且不同软件语法也有略微差异，个人推荐使用Typora编辑器（免费），做个人笔记的话推荐使用有道云笔记，写个人博客可以使用CSDN或简书，其中CSDN对markdown的兼容性是最好的。

3 Markdown语法

3.1 基础语法

3.1.1 标题

语法：“#” + “空格” + “标题”或使用快捷键“ctrl” + 数字，数字对应各级标题，如：ctrl +1 是一级标题，”#“的个数和数字对应标题的级别数

示例：

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

效果

在这里插入图片描述

3.1.2 目录

[toc]：自动生成目录     见文首

3.1.3 文本设置

语法与示例：

*斜体* 或 _斜体_
**粗体**
***斜体加粗体***
~~删除线~~
<u>下划线</u>
下标：h~2~0 
上标：2^5^
简单颜色：==颜色==

效果

斜体或斜体

粗体

斜体加粗体

~~删除线~~

下划线

下标：h₂0

上标：2⁵

简单颜色：颜色

3.1.4 分割线

语法：三个或者三个以上的 - 或者 * 都可以。

示例：

---
----
***
*****

效果：无论哪种表达方式，显示效果都是一样的。

3.1.5 代码

（1）单行代码

语法：使用两个 ` 符号

示例：

 这是单行代码显示样式

效果

这是单行代码显示样式

（2）多行代码块

语法：使用三个 ` 符号，然后点击“enter”键

示例：

```
这里是多行代码块，可以包含一段或多段代码，可以写任何语言的代码

效果：

这里是多行代码块，可以包含一段或多段代码，可以写任何语言的代码

3.1.6 引用

语法：在“>”符号之后跟一个空格，然后添加引用内容。

效果：

这是引用的效果

3.1.7 转义字符

有时我们需要输出某种符号但又被软件编译了而无法实现，这时需要转义字符帮助输出

语法：使用反斜杠\+需要输出的符号来实现

示例：

*无转义字符
\*有转义字符

效果

无转义字符
* 有转义字符

3.1.8 插入链接

语法：[链接名称](链接地址) 或者 <链接地址>

示例：

这是[冷哥的个人博客网站](https://jonethon.github.io)
这是冷哥的个人博客网站：<https://jonethon.github.io>

效果

这是学习怪咖的个人博客网站

这是学习怪咖的个人博客网站：https://jonethon.github.io

3.1.9 插图图片

语法：![图片的代替文字，任意文字，也可不填](文件路径或图片链接)，当然也可以直接粘贴或者直接拖进来啦。

示例：

![头像](C:\Users\Wang\Desktop\头像.jpg)

效果

在这里插入图片描述

3.1.10 插入表格

语法：Markdown 制作表格使用|来分隔不同的单元格，使用 -来分隔表头和其他行。

对齐方式：

表达式	说明
----:	设置内容和标题栏居右对齐
:----	设置内容和标题栏居左对齐
:----:	设置内容和标题栏居中对齐

示例：

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果：

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

3.1.11 文本缩进语法

语法：

&ensp;半角空格  
&ensp;&ensp;半角空格两个  
&emsp;全角空格  
&emsp;&emsp;全角空格两个，用作首行缩进

示例：

这是没有空格
&ensp;这是半角空格  
&ensp;&ensp;这是半角空格两个  
&emsp;这是全角空格  
&emsp;&emsp;这是全角空格两个，常用作首行缩进
注意：必须加分号，否则不是markdown语法

效果：

这是没有空格
这是半角空格
这是半角空格两个
这是全角空格
这是全角空格两个，常用作首行缩进

3.2 高级语法

目前markdown支持 sequence, flowchart and mermaid这3中流程图工具，使用markdown语法直接画图不需要考虑其他干扰的东西，且可以更好的将图形嵌入文档中。Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，可以完全取代sequence和flowchart。

3.2.1 Mermaid语法

（1）语法

graph 方向描述
  描述语句

注意：

语法必须在代码块内书写
必须选择代码的语言，不同的工具包应选择对应代码语言，分别为：Mermaid、sequence、flow（注意flowchart的代码语言是flow而不是flowchart）

（2）语法解释

A.方向描述

表达式	说明
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

B.节点

表达式	说明
id[文字]	矩形节点
id(文字)	圆角矩形节点
id((文字))	圆形节点
id>文字]	右向旗帜状节点
id{文字}	菱形节点

说明：id是框图的识别标志，文字是框内显示的文字，包裹文字的各种括号是框图的形状

C.连接线样式

表述	说明
>	添加尾部箭头
-	不添加尾部箭头
–	单线
–text–	单线上加文字
==	粗线
==text==	粗线加文字
-.-	虚线
-.text.-	虚线加文字

D.子图语法

subgraph 子图表名称
    描述语句(同上)
end

3.2.2 流程图

下面给出了使用mermaid和flowchart两个工具包绘制的流程图，mermaid功能更全面操作性更高但图形效果不够理想，而flowchart语法更简单图形效果美观。很明显我们更喜欢使用示例2的效果，且示例2使用的flowchart工具包语法更简单易懂，在此就不细说了，详情请看示例代码。

（1）示例1（mermaid）

graph TB
A[开始] --> B(初始化)
	B --> C[条件1]
    C --> |YES| C1{条件2}
    C --> |NO| C2{条件3}
    C1 -->|YES| D[结果1]
    C1 -->|NO| E[结果2]
    C2 -->|YES| F[结果3]
    C2 -->|NO| B(初始化)
    D[结果1] --> G(end)
    E[结果2] --> G(end)

（2）效果

（3）示例2（flowchart）

flow
st=>start: 开始
op=>operation: 初始化
op1=>operation: 结果1
op2=>operation: 结果2
op3=>operation: 结果3
c1=>condition: 条件1
c2=>condition: 条件2
c3=>condition: 条件3
e=>end

st->op->c1
c1(yes)->c2
c1(no)->c3
c2(yes)->op1->e
c2(no)->op2->e
c3(yes)->op3->e
c3(no)->op

（4）效果

3.2.3 时序图

时序图（Sequence Diagram），又名序列图、循序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序，当执行一个用例行为时，其中的每条消息对应一个类操作或状态机中引起转换的触发事件。在markdown中使用sequence工具包制作。

语法：

符号	含义	说明
-	代表实线	表示主动发送消息
>	代表实心箭头	表示同步消息
–	代表虚线	表示返回消息
>>	代表非实心箭头	表示异步消息

示例1：

Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

效果：

示例2：

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

效果：

以上示例均来源于sequence官网：https://bramp.github.io/js-sequence-diagrams/，更多内容请前往相关晚上查找资料学习。

3.2.4 甘特图

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。在markdown中使用mermaid工具包制作。

语法：

属性	说明
gantt	特指甘特图的关键词
dateFormat	指定日期格式：YYYY-MM-DD，Y表示年，M表示月，D表示日，如：2019-12-01
title	指甘特图的标题
section	项目关键字，空格之后输入项目名称
done	已完成
active	正在进行
crit	关键任务,
不填写	默认情况下任务都为待完成状态
id	框图的识别标志
after	用于描述任务时间关系
时间范围	YYYY-MM-DD，YYYY-MM-DD，如：2019-12-06,2019-12-08
指定天数	指定完成该过程需要的时间天数，如：3d
指定开始日期+天数	“YYYY-MM-DD+xd”，如：2019-12-09, 3d

示例：

gantt         
       dateFormat  YYYY-MM-DD   
       title 使用mermaid语言定制甘特图

       section 任务1
       已完成的任务           :done,id1, 2019-12-06,2019-12-08
       正在进行的任务         :active,id2, 2019-12-09, 3d
       待完成任务1           :         id3, after id2, 5d
       待完成任务2           :         id4, after id3, 5d

       section 关键任务
       已完成的关键任务       :crit, done, 2019-12-06,24h
       已完成的关键任务2      :crit, done, after id1, 2d
       正在进行的关键任务     :crit, active, 3d
       待完成的关键任务       :crit, 5d
       待完成任务            :2d
       待完成任务2           :1d

效果：

文件导出：markdown提供了导出功能，可以将上面的所有内容和图形导出为各种文件格式，不同的编辑器支持的导出格式各异，不过也有一把瑞士军刀啦——pandoc，这把军刀可以把Markdown转换成日常所需的文件格式啦，如需求量大的话，请留言啦，下次安排一下啦。

4 Markdown与HTML

以上基础可以解决了我们的基本应用，但有时我们想用颜色或字体大小等突出文字又该怎么实现呢？

markdown具有超强的拓展功能，支持HTML语法，不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。需要HTML语法学习的朋友请自行学习，下面仅列出在markdown中常用到的HTML语法。

4.1 HTML元素

目前支持的HTML元素：<kbd> 等

示例：

使用 <kbd>Ctrl</kbd>+<kbd>ALT</kbd>+<kbd>Del</kbd> 重启电脑

效果：

使用 Ctrl+ALT+Del 重启电脑

其他元素请自行参考HTML语法规则

4.2 HTML语句

Markdown语法简单易学，可以实现大部分功能，但有时我们想设置特殊的格式以突出文本，这是需要使用HTML语法来帮助实现自己想要的功能，简要介绍几个常用的HTML语句。特别指出的是，Markdown可以与HTML语法混用，如：<center>**居中加粗**</center> 。

4.2.1 字体

语法：

<font face="字体">文本内容</font>

示例：

<font face="华文行楷">这是华文行楷</font>

效果：

这是华文行楷

4.2.2 字号

语法：

<font Size=(1~7)>文本内容</font>  #默认字体大小为3号

示例：

<font Size=1>我是1号字</font>  
<font Size=2>我是2号字</font>  
<font Size=3>我是3号字</font>  
<font Size=4>我是4号字</font>  
<font Size=5>我是5号字</font>  
<font Size=6>我是6号字</font>  
<font Size=7>我是7号字</font>

效果：

我是1号字
我是2号字
我是3号字
我是4号字
我是5号字
我是6号字
我是7号字

4.2.3 颜色

语法：

<font color=颜色值>文本</font>

示例：

<font color=#0099ff>color=#0099ff</font>
<font color=red>color=red</font>

效果：

color=#0099ff
color=red

说明：颜色值可以是颜色英文名也可以是十六为颜色值，更多详细内容请参考：https://blog.csdn.net/testcs_dn/article/details/45719357/

4.2.4 文本居中

语法：

<center>文本内容</center>

示例：

<center>我想居中</center>

效果：

我想居中

5 特殊符号与数学符号

Markdown支持Latex语法，可以快速输入特殊符号、数学符号和数学公式等，网上有许多前辈整理得非常的完善，在此就不做过多赘述，详情请自行查找，也可参考：markdown公式符号大全

标签：语法,Markdown,示例,markdown,之道,修仙,HTML,3.1
来源： https://blog.csdn.net/lenggege1/article/details/103704570