Skip to content

Latest commit

 

History

History
1160 lines (783 loc) · 39.9 KB

README.md

File metadata and controls

1160 lines (783 loc) · 39.9 KB

Markdown Syntax Guide

  本文主要介绍了Markdown语法的基本语法，从而使Markdowners专注于内容和技术，不再担心排版问题。注意，以下介绍是通用语法，可能在其它平台，诸如在Hexo、Hugo等静态博客下的主题中，语法略显不同，注意区别。

简介

  Markdown是为网络书写者而生的方便“text-to-HTML”工具，它允许人们用一种易读易写的纯文本格式进行书写，然后将其转化成XHTML（或HTML）。

  Markdown 的特点是“易读易写”，其中可读性是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。

  Markdown 语法的目标是：成为一种适用于网络的书写语言。

  Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来， HTML 已经很容易写了。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

                                    —— John Gruber

  Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档，因此有些HTML语法也可以直接在Markdown中应用。

  由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、Gitbook、GitLab、Gitee、简书、掘金、CSDN等，甚至还能被使用来撰写电子书。

  Markdown具有一系列衍生版本，用于扩展Markdown的功能（如表格、脚注、内嵌HTML等等），这些功能原初的Markdown尚不具备，它们能让Markdown转换成更多的格式，例如LaTeX，Docbook。

  Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具，如Pandoc；要么基于网站，如GitHub和Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。

  总结一下Markdown的特点：

  • Markdown是一种轻量级的标记语言；

  • Markdown的特点是易读易写；

  • Markdown的内容与形式相分离；

  • Markdown文档书写方式是源码书写，基本纯键盘输入；

  • Markdown文档是纯文本文档，意味着图片独立于文档之外；

  • Markdown是书写语言，不是发布语言，发布需要转换成Html；

以下内容为Markdown的 基本语法，结合各种官方文档和本人的使用经验使用经验而成。

注：以下代码均在Typora中测试通过。

标题

语法： #的个数 + space + 文本

解释：

  • 直接输入1次#，并按下space后，再输入文本内容，将生成1级标题；

  • 输入2次#，并按下space后，再输入文本内容，将生成2级标题；

    以此类推，输入几个#，就生成几级标题，大部分Markdown最多支持6级标题。

示例：

格式：

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

输出：

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

文本样式

强调/斜体

前后各一个*（星号）或各一个_（下划线符）包围的文本是倾斜文本。

*强调文本*   强调文本

_强调文本_   强调文本

加粗

前后各两个*（星号）或各两个_（下划线符）包围的文本是加粗文本。

**加粗文本**   加粗文本

__加粗文本__   加粗文本

HTML方法

<b>加粗文本</b>   加粗文本

<strong>加粗文本</strong>   加粗文本

Note：__由两个_组成。

强调并加粗

***强调并加粗***   强调并加粗

**_强调并加粗_**   强调并加粗

删除线

~~删除文本~~   删除文本

标记/高亮

==标记文本==

<mark>标记文本</mark>

Note： Github貌似不支持渲染该功能；

下划线

<u>下划线</u>

Note： Github貌似不支持渲染该功能；

引用

单次引用

> 引用文本

引用文本

嵌套引用

> 嵌套引用1
>> 嵌套引用2
>>> 嵌套引用3
>>
>> 嵌套引用2
>
> 嵌套引用1

嵌套引用1

嵌套引用2

嵌套引用3

嵌套引用2

嵌套引用1

Note：

  1. 在对文本进行操作时，注意在这些符号的两侧空一格，以免编译错误，尤其在中文编辑时。
  2. 引用可以和列表相互调用。

列表

  Markdown列表有有序列表、无序列表、任务列表、自定义列表四种。列表可以嵌套成多级列表。

  • 有序列表

    数字+.+空格+文本

    格式：

    1. 文本一

    2. 文本二

    3. 文本三

    输出：

    1. 文本一

    2. 文本二

    3. 文本三

  • 无序列表

    +、-、*都可以用来标记无序列表。

    格式：-/+/*+空格+文本

    - 文本一

    + 文本二

    * 文本三

    输出：

    • 文本一

    • 文本二

    • 文本三

  • 任务列表

    格式：-+空格+[+x(可选)+]+空格+文本

    - [x] 已完成任务

    - [ ] 未完成任务

    - [ ] 未完成任务

    输出：

    • 已完成任务

    • 未完成任务

    • 未完成任务

  • 嵌套列表

    列表嵌套只需在子列表中的选项缩进四个空格即可，在Typora中，向右缩进的快捷键是ctrl+]。

    格式：

    1. 任务一：
    - 任务一嵌套的第一个元素
    - 任务一嵌套的第二个元素
2. 任务二：
    - 任务二嵌套的第一个元素
    - 任务二嵌套的第二个元素

    输出：

    1. 任务一：

      • 任务一嵌套的第一个元素

      • 任务一嵌套的第二个元素

    2. 任务二：

      • 任务二嵌套的第一个元素

      • 任务二嵌套的第二个元素

插入链接＆图片&GIF

  在Markdown里插入链接、图片和GIF，最常用的方法如下：

链接

格式：［显示文本］(链接地址URL)

Typora快捷键：ctrl+k

举例：请点击这个链接进行搜索。

上述中的链接格式具体为：[链接](https://www.baidu.com)

自动链接/邮箱

  自动链接直接用一对尖括号包围即可。

<https://www.kangzhiheng.top>，显示https://www.kangzhiheng.top

  电子邮件地址也可以被自动索引。

<[email protected]>，显示[email protected]

点击生成的链接会自动打开计算机上安装的电子邮件客户端程序。

图片

Makrdown里的图片链接格式有两种：默认格式和HTML方法。

  • 默认格式：![注释](图片链接)

    注意：[]里面的注释可有可无，建议最好加上这个图片的注释；()里的图片链接可以是本地图片链接，也可以是URL。关于这个图片的链接URL方法，具体参考我的另一篇博文《自建图床三驾马车：Typora、Gitee与PicGo》。

    举例：![Home](https://gitee.com/kangzhiheng/ImageHosting/raw/master/Img/adoredee.png)

    Home

    上述图片链接方法，默认是图片URL的原始大小，且默认靠左显示。如果使图片的大小可变且居中，可使用下面的HTML方法。

  • HTML方法：<div align=center> <img width="150" height="150" src="URL"/> </div>

    其中：

    • align可选参数为：left、center、right；

    • width、height根据实际情况填写，可以是实际数字，也可以是百分比缩放。

    • src为图片URL。

    举例1：调整图片宽度为650，高度为150；

    <div align=center> <img width="150" height="150" src="https://gitee.com/kangzhiheng/ImageHosting/raw/master/Img/adoredee.png"/> </div>

    举例2：调整图片宽度为原来的30%，高度为原来的40%；

    <div align=center> <img width=30% height=40% src="https://gitee.com/kangzhiheng/ImageHosting/raw/master/Img/adoredee.png"/> </div>

代码

  在Markdown中，代码分为两种：行内代码和代码块。

行内代码/代码片段

格式：` 代码片段 `

输出：代码片段

代码块

格式：

```代码语言
   代码块
```

举例：

Python语言：

```python
#!/usr/bin/env python3
import tensorflow as tf

print(tf.__version__)

输出：

#!/usr/bin/env python3
import tensorflow as tf

print(tf.__version__)

段落

  如果是中文书写习惯，每一段的开头，都应该空4个英文字符的宽度。一般在word里，在段首可以直接按Tab键实现，但在Markdown中，这并不起作用。这时需要用到HTML里的空格方法。

缩进

&emsp;：全方大的空白，一个汉字（两个英文字符）的宽度，&#8195;于此同义；

&ensp;：半放大的空白，一个英文字符的宽度（½个汉字），&#8194;于此同义；

&nbsp;：不断行的空白，⅓个汉字的宽度，&#160;于此同义；

顶格；

&emsp;空一个汉字的宽度；

&ensp;空½个汉字的宽度；

&nbsp;空⅓个汉字的宽度；

顶格；

 空一个汉字的宽度；

 空½个汉字的宽度；

 空⅓个汉字的宽度；

总结：所以按照中文书写习惯，段首空两格，只需要在段首前面加&emsp;&emsp;就好；

居中

Markdown本身没有居中的语法，需要HTML元素支持。

格式1：<center> 人间有味是清欢  </center>

Note： Github不支持渲染该功能；具体效果请参阅我的博客文章《Markdown Syntax Guide》。

格式2： <p align="center"> 入淮清洛渐漫漫 </p>

输出：

入淮清洛渐漫漫

格式3： <div align=center> 一蓑烟雨任平生 </div>

输出：

一蓑烟雨任平生

换行

在Makrdown源代码模式下，有两种换行方法：

  1. 在段末连续两次按下Enter，即两个段落之间空一行；

  2. 在上一段的末尾加上HTML标签<br>即可换行；

注意：在Typora中，直接在段末按下Enter即可换行；

字体

格式：

<font face="华文行楷">华文行楷</font>  
<center><font face="华文行楷">华文行楷居中</font></center> 
<font face="黑体">我是黑体字</font>
<font face="宋体">我是宋体字</font>
<font face="微软雅黑">我是微软雅黑字</font>
<font face="fantasy">我是fantasy字</font>
<font face="Helvetica">我是Helvetica字</font>
<font face="STCAIYUN">我是华文彩云</font>

Note： Github不支持渲染该功能；具体效果请参阅我的博客文章《Markdown Syntax Guide》。

字号

格式：

<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>

注意：这里的字号与word里的不同，浏览器一般默认字号为3号。

颜色

查看颜色表： http://www.114la.com/other/rgb.htm，选择需要的颜色所对应的RGB值（十六进制）。

格式：

<font color="red"> 我是红色字体，color=red </font>  
<font color="yellow"> 我是黄色字体，color=yellow </font>   
<font color="blue"> 我是蓝色字体，color=blue </font>  
<font color="green"> 我是绿色字体，color=green </font>  
<font color="gray"> 我是灰色字体，color=gray </font>  
<font color="orange"> 我是橙色字体，color=orange </font>  
<font color="brown"> 我是棕色字体，color=brown </font> 

<font color="#FF8C69"> 字体颜色，color=#FF8C69 </font>  
<font color="#EE82EE"> 字体颜色，color=#EE82EE </font>  
<font color="#C1FFC1"> 字体颜色，color=#C1FFC1 </font>  
<font color="#9B30FF"> 字体颜色，color=#9B30FF </font>  
<font color="#CD00CD"> 字体颜色，color=#CD00CD </font>  
<font color="#00B2EE"> 字体颜色，color=#00B2EE </font>

输出：

Note： Github不支持渲染该功能；具体效果请参阅我的博客文章《Markdown Syntax Guide》。

同时改变字体、字号和颜色

在HTML元素<font></font>中可选的属性有字体face、字号size和颜色color，可以自由组合，属性之间没有逗号。

举例：

<font face="华文行楷" size=5 color=#CD00CD > 大小为5号，颜色为#CD00CD的华文行楷。 </font>

Note： Github不支持渲染该功能；具体效果请参阅我的博客文章《Markdown Syntax Guide》。

背景色

查看颜色表： http://www.114la.com/other/rgb.htm，选择需要的颜色所对应的RGB值（十六进制）。

格式：

<table><tr><td bgcolor=#FF69B4> 背景色由十六进制颜色值设置而成：#FF69B4 </td></tr></table>
<table><tr><td bgcolor=#FF83FA> 背景色由十六进制颜色值设置而成：#FF83FA </td></tr></table>
<table><tr><td bgcolor=#40E0D0> 背景色由十六进制颜色值设置而成：#40E0D0 </td></tr></table>
<table><tr><td bgcolor=#C0FF3E> 背景色由十六进制颜色值设置而成：#C0FF3E </td></tr></table>
<table><tr><td bgcolor=#54FF9F> 背景色由十六进制颜色值设置而成：#54FF9F </td></tr></table>

输出：

Note： Github不支持渲染该功能；具体效果请参阅我的博客文章《Markdown Syntax Guide》。

分割线/水平线

  在标准 Markdown 中，分割线/水平线一般由连续的3个同样的-、+、*组成，只需这三个符号在同一行且没有字符（除了空格）即可，符号之间有没有空格不影响分割线的生成。如-- -、+ + +、***都可以。

分割线的效果见每一小节之间，如下。

表格

基本表格

基本的表格方法如下：

| Items | Prices|
| :--: | : -- : |
| Apple | 20$ |
| Banana | 25$ |

详细介绍：

  • 第一行：表头，两个符号|间的内容是标题；

  • 第二行：可选，设置表中内容的对齐方式，默认是靠近显示，如下：

    : --- :设置内容水平居中对齐；

    : --- 设置内容左对齐；

     --- :设置内容右对齐；

    注意：

    • 对齐方式依次用|进行间隔；

    • :是英文下的冒号，且旁边的-的个数不限制；

    • 标题的对齐方式，与编辑器有关，有些编辑器里的标题对齐方式与内容一致，而有一些编辑器相反，这时如果想要使标题居中对齐，则需要HTML标签<center></center>。

  • 下面几行，是表格的内容，也依次用|间隔，表格的内容与表头一一对应；

如下：

| <center> Items </center> | <center> Processor </center> | <center> Display </center> | <center> B/C </center> | <center> Camera </center>  | <center> S/R </center> |<center> Prices（RMB） </center> |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| HuaWei P40 Pro | HUAWEI Kirin 990 5G | 6.58"OLED / 2K / 90Hz | 4200mAh / 40W | 5000 / 3200 | 8G + 128G / 256G / 512G | 5988 /6498 / 7388 |
| OPPO Find X2 Pro | Qualcomm® Snapdragon™ 865 | 6.67"AMOLED / 3K QHD+/ 120Hz | 2*2130mAh / 65W | 4800 / 3200 | 12G + 256G | 6999 |
| OnePlus 8 Pro | Qualcomm® Snapdragon™ 865 | 6.78"AMOLED / 2K / 120Hz | 4510mAh / Warp Charge 30T Fast Charging (5V/6A) | 4800 / 1600 | 8G + 128G / 12G + 256G | 5399 / 5999 |
| Xiaomi 10 Pro | Qualcomm® Snapdragon™ 865 | 6.67"AMOLED / 90Hz | 4500mAh / 50W | 10000 / 2000 | 8G + 256G / 12G + 256G / 12G + 512G | 4999 / 5499 / 5999 |
| Vivo NEX 3 |  Qualcomm® Snapdragon™ 865 Plus | 6.89''POLED /  2K FHD+ | 4500mAh /  22.5W | 6400 / 1600 | 8G + 256G | 4998 |

显示：

Items Processor Display B/C Camera S/R Prices（RMB）
HuaWei P40 Pro HUAWEI Kirin 990 5G 6.58"OLED / 2K / 90Hz 4200mAh / 40W 5000 / 3200 8G + 128G / 256G / 512G 5988 /6498 / 7388
OPPO Find X2 Pro Qualcomm® Snapdragon™ 865 6.67"AMOLED / 3K QHD+/ 120Hz 2*2130mAh / 65W 4800 / 3200 12G + 256G 6999
OnePlus 8 Pro Qualcomm® Snapdragon™ 865 6.78"AMOLED / 2K / 120Hz 4510mAh / Warp Charge 30T Fast Charging (5V/6A) 4800 / 1600 8G + 128G / 12G + 256G 5399 / 5999
Xiaomi 10 Pro Qualcomm® Snapdragon™ 865 6.67"AMOLED / 90Hz 4500mAh / 50W 10000 / 2000 8G + 256G / 12G + 256G / 12G + 512G 4999 / 5499 / 5999
Vivo NEX 3 Qualcomm® Snapdragon™ 865 Plus 6.89''POLED / 2K FHD+ 4500mAh / 22.5W 6400 / 1600 8G + 256G 4998

注：以上数据于2020年5月30号来源于各大官网。B/C表示Battery and Charge，S/R表示Storage and RAM。

合并单元格

  • <br>方法

    合并单元格，也即单元格内换行，使用<br>即可，其它设置与普通表格一致。

    | <center> 姓名 </center> | <center> 爱好 </center>  |
| :--: | :-----------------------: |
| 张三 |      足球 <br> 篮球       |
| 李四 |  羽毛球 <br> 乒乓球HTML方法 |

    显示：

    姓名 爱好
    张三 足球
    篮球
    李四 羽毛球
    乒乓球HTML方法

  • HTML方法

    <table>
	<tr>
	    <th>属性</th>
	    <th>属性值</th>
	    <th>描述</th>  
	</tr >
	<tr >
	    <td rowspan="3">type </td>
	    <td>text</td>
	    <td>单行文本输入框</td>
	</tr>
	<tr>
	    <td>password</td>
	    <td>密码输入框</td>
	</tr>
	<tr>
	    <td>radio</td>
	    <td>单选按钮</td>
	</tr>
	<tr>
	    <td  rowspan="2">name</td>
	    <td>用户自定义</td>
	    <td>控件名称</td>
	</tr>
	<tr>
		<td> 用户自定义 </td>
		<td> 控件名称 </td>
	</tr>
	<tr>
	    <td >value</td>
	    <td >用户自定义</td>
	    <td >默认文本值</td>
	</tr>
</table>

    显示：

    属性 属性值 描述
    type text 单行文本输入框
    password 密码输入框
    radio 单选按钮
    name 用户自定义 控件名称
    用户自定义 控件名称
    value 用户自定义 默认文本值

脚注

Markdown的脚注功能有两种实现方法。

方法一

脚注[^1]
[^1]: 这里是脚注

方法二

如果希望被注释的文本是斜体，则追加<cite></cite>即可，如下：

<cite>脚注[^1]</cite>
[^1]: 这里是脚注

脚注的部分会在文章的末尾进行显示，并且支持跳转到指定位置。

锚点跳转

  有这么一种情况：浏览一个很长的文章时，可能只对其中几个章节感兴趣时，需要直接跳转到该章节，这时就需要锚点。

  锚点是是网页制作中超级链接的一种，又叫命名锚记。使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

  锚点跳转要注意首先要注意以下两点：

  1. 锚点的标识名称，可使用任意字符，使用锚点跳转；

  2. 锚点生成的链接，可以是页内跳转，也可以生成目录；

  3. 锚点只对#标注的标题生成锚点链接；

  4. 锚点的基本格式是：[跳转标题](#跳转标题)，注意()里的#与后面的内容无空格，且只有一个#，该符号与正文里的多级标题无关（不管是几级标题，只需要一个#URL）；

  5. 非英文的锚点字符，在单击跳转时，在浏览器的URL中会按照规则进行编码和解码；

在使用时还需要记住以下几个问题：

  • 任意 1-6 个#标注的标题都可设置为同名的锚点链接

    [标题1](#标题1)  
[标题2](#标题2)  
[标题3](#标题3)  

# 标题1 
## 标题2 
### 标题3

  • 大写字母要转换成小写

    [Github标题](#github标题)

### Github标题

  • 多单词锚点的空格用-代替

    [Github Heading](#github-heading)

### Github Heading

  • 多级序号需要去除.

    [2.3. Github Heading](#23-github-heading)

### 2.3. Github Heading

MathJax公式

  MathJax和Katex是两种支持HTML的轻量级的数学公式引擎，但MathJax对行内公式支持较好。它们的低层都是TEX，所以$\LaTeX$的语法，都可以在$和$$中被渲染。在hugo中配置MathJax请参阅文章。

行内公式

  使用一对$来区别正常文字和行内公式。如$ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} $，效果为$ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} $

块状公式

  块状公式由一对$$进行区别，如下，欧拉积分表示为

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. $$

  在hugo中使用MathJax需要注意的问题：

多行公式

  如下图，多行公式 $$ \begin{aligned} a=& b+c-d \cr &+e-f \cr =& g+h \cr =& i \end{aligned} $$   正常的$\LaTeX$语法是

$$
\begin{aligned}
a=& b+c-d \
&+e-f \
=& g+h \
=& i
\end{aligned}
$$

  可是却显示为一行，如下 $$ \begin{aligned} a=& b+c-d
&+e-f
=& g+h
=& i \end{aligned} $$   这是因为hugo的Markdwon渲染器是blackfriday，字符转义存在一些问题，解决方法是在每一行公式后的\，加cr，如下：

$$
\begin{aligned}
a=& b+c-d \cr
&+e-f \cr
=& g+h \cr
=& i
\end{aligned}
$$

  $\LaTeX$中的特殊符号，请参阅链接。

Mermaid库

  Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中，可以尝试在线Mermaid编辑器（ 推荐 ）。

Flow
[docs - live editor] 
```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```
Sequence
[docs - live editor] 
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
Gantt
[docs - live editor] 
```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
```
Class
[docs - live editor] 
```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
```
State
[docs - live editor] 
```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
Pie
[docs - live editor] 
```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
注：以上Mermaid资源来自Mermaid的[官方指导文件](https://github.com/mermaid-js/mermaid)。

在Hugo中使用Mermaid库的注意事项：

  在hugo中，Markdown编译器是Blackfriday，并不直接支持Mermaid库，需要进行一定的配置，具体请参阅这篇文章。

  配置完成后，在使用时，利用{{ <mermaid> }}和{{ </mermaid> }}框住mermaid代码，例如用{{ <mermaid> }}和{{ </mermaid> }}框住以下代码即可：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

更多Mermaid语法，参考官方文档。

Emoji表情

  Markdown支持Emoji表情，比如

Items Syntax Preview Syntax Preview Syntax Preview
Expression 😯 😯 😄 😄 😓 😓
People :couple​: 👫 :couple_with_heart​: 💑 :cupid​: 💘
Nature :sunny​: ☀️ :earth_africa​: 🌍 :zap​: ⚡
Animal :poodle​: 🐩 :monkey​: 🐒 :whale​: 🐳
Object :mailbox​: 📫 :computer​: 💻 :blue_book​: 📘
Places :mailbox​: 🇨🇳 :airplane​: ✈️ :tent​: ⛺
Symbols :ideograph_advantage​: 🉐 :white_check_mark​: ✅ :o​: ⭕

更多Emoji表情，参考官方文档和Github官方文档。

转义字符

  在Markdown中，有一些字符比较特殊，这些字符用来标识Markdown语法，比如加粗语法**，换行语法<br>等，如果需要显示特定的符号则需要使用转义字符 — 反斜杠\。可能需要转义的字符有：

\\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
\# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号

其它HTML元素支持

  Markdown支持一些HTML元素，如下：

  • <abbr>，缩略词，鼠标滑过时显示全名；

    举例：<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format。

    结果：GIF is a bitmap image format。

  • <kbd>，键位显示；

    举例：使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑；

    结果：使用 Ctrl+Alt+Del 重启电脑；

  • <sub>，下标；<sup>，上标

    H<sub>2</sub>O，H2O；

    n<sup>2</sup>，n2；

  • <mark>，标记/高亮；

    举例：被<mark>标记</mark>的文字值得注意；

    结果：被标记的文字值得注意；

  • <code>，无边框代码块，相当于行内代码``；

    举例：<code><iostream></code>是C++中的一个头文件。

    结果：<iostream>是C++中的一个头文件。

  • <b>，加粗；<i>，斜体；<em>，强调；<br>，换行；<pre>，形成代码块；<cite>，引用；

特殊符号

  在Markdown中，同样支持一些HTML中的特殊符号，如下表：

符号 描述 编码 符号 说明 编码 符号 说明 编码
§ 章节section &sect; ∞ 无穷infinity &infin; μ mu &mu;
£ 磅pound &pound; √ 平方根 &radic; ξ xi &xi;
® 版权copyright &reg; ∇ 向量算子 &nabla; ρ rho &rho;
½ fraction 1/2 &frac12; ≈ 约等于 &asymp; σ sigma &sigma;
¼ fraction 1/4 &frac12; ≠ 不等于 &ne; π 圆周率pi &piv;
¾ fraction 3/4 &frac34; α alpha &alpha; ∵ because &because;
¿ 倒问号 &iquest; β beta &beta; ∴ therefore &there4;
× 乘号 &times; δ delta &delta; ♫ 音符 &#9835;
÷ 除号 &divide; eta eta eta ☯ 太极 &#9775;

  更多HTML特殊符号，强烈建议参阅这篇文档：https://www.toptal.com/designers/htmlarrows/symbols/

Typora功能快捷键

  使用Typora编辑Markdown时，快捷键的使用使我们事半功倍。

撤销：Ctrl/Command + Z

重做：Ctrl/Command + Y

加粗：Ctrl/Command + B

斜体：Ctrl/Command + I

标题：Ctrl/Command + Shift + H

无序列表：Ctrl/Command + Shift + U

有序列表：Ctrl/Command + Shift + O

检查列表：Ctrl/Command + Shift + C

插入代码：Ctrl/Command + Shift + K

插入链接：Ctrl/Command + Shift + L

插入图片：Ctrl/Command + Shift + G

查找：Ctrl/Command + F

替换：Ctrl/Command + G

参考

  1. https://www.toptal.com/designers/htmlarrows/symbols/；

  2. https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md；

  3. https://www.webfx.com/tools/emoji-cheat-sheet/；

  4. https://xuchengpeng.com/hugo-blog/2018/05/25/mathjax-in-markdown-blog/