May 23, 2020

10709 words 22 mins read

Markdown Syntax Guide

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中应用1

  由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHubRedditDiasporaStack ExchangeOpenStreetMapSourceForgeGitbookGitLabGitee简书掘金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:__由两个_组成。

强调并加粗

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

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

删除

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

标记/高亮

==标记文本==    ==标记文本==

Note:该Hugo主题不支持渲染该功能,但支持HTML高亮语法,如下:

<mark>标记文本</mark>   标记文本

下划线

<u>下划线</u>下划线

引用

单次引用

> 引用文本

引用文本

嵌套引用

> 嵌套引用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

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

<kangzhiheng@live.cn>,显示kangzhiheng@live.cn

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

图片

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可选参数为:leftcenterright

    • widthheight根据实际情况填写,可以是实际数字,也可以是百分比缩放。

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

    输出

    人间有味是清欢

    格式2:  <p align=“center”> 入淮清洛渐漫漫 </p>

    输出:

    入淮清洛渐漫漫

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

    输出:

    一蓑烟雨任平生
  • 居左、居右

    居左格式 <p align=“left”>我在左边</p>

    我在左边

    居右格式 <p align=“right”>我在右边</p>

    我在右边

换行

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

输出:

华文行楷

华文行楷居中

我是黑体字

我是宋体字

我是微软雅黑字

我是fantasy字

我是Helvetica字

我是华文彩云

字号

格式:

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

注意这里的字号与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> 

输出:

我是红色字体,color=red 
我是黄色字体,color=yellow 
我是蓝色字体,color=blue 
我是绿色字体,color=green 
我是灰色字体,color=gray 
我是橙色字体,color=orange 
我是棕色字体,color=brown 

字体颜色,color=#FF8C69 
字体颜色,color=#EE82EE 
字体颜色,color=#C1FFC1 
字体颜色,color=#9B30FF 
字体颜色,color=#CD00CD 
字体颜色,color=#00B2EE 

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

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

举例:

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

输出:

大小为5号,颜色为#CD00CD的华文行楷。

背景色

查看颜色表: 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>

输出:

背景色由十六进制颜色值设置而成:#FF69B4
背景色由十六进制颜色值设置而成:#FF83FA
背景色由十六进制颜色值设置而成:#40E0D0
背景色由十六进制颜色值设置而成:#C0FF3E
背景色由十六进制颜色值设置而成:#54FF9F

分割线/水平线

  在标准 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]: 这里是脚注

显示:

脚注2

方法二

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

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

显示:

脚注3

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


锚点跳转

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

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

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

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

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

行内公式

  使用一对$来区别正常文字和行内公式。如$ 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$中的特殊符号6,请参阅链接


Mermaid库

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

甘特图Gantt

​```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d
​```

显示

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section 现有任务 已完成 :done, des1, 2014-01-06,2014-01-08 进行中 :active, des2, 2014-01-09, 3d 计划一 : des3, after des2, 5d 计划二 : des4, after des3, 5d

时序图SequenceDiagram

​```mermaid
sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
​```

显示:

sequenceDiagram 张三 ->> 李四: 你好!李四, 最近怎么样? 李四-->>王五: 你最近怎么样,王五? 李四--x 张三: 我很好,谢谢! 李四-x 王五: 我很好,谢谢! Note right of 王五: 李四想了很长时间, 文字太长了
不适合放在一行. 李四-->>张三: 打量着王五... 张三->>王五: 很好... 王五, 你怎么样?

流程图Flowchat

​```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
​```

显示:

graph LR A[长方形] -- 链接 --> B((圆)) A --> C(圆角长方形) B --> D{菱形} C --> D

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

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

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

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

显示:

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

更多Mermaid语法,参考官方文档


Emoji表情

  Markdown支持Emoji表情,比如

Items
Syntax
Preview
Syntax
Preview
Syntax
Preview
Expression :hushed: 😯 :smile: 😄 :sweat: 😓
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://zh.wikipedia.org/wiki/Markdown ↩︎

  2. 这里是脚注 ↩︎

  3. 这里是脚注 ↩︎

  4. https://baike.baidu.com/item/锚点 ↩︎

  5. Markdown 博客中使用 MathJax 数学公式 ↩︎

  6. Latex/MathJax/Katex数学公式手册 ↩︎

  7. Mermaid: https://kentxxq.com/contents/拓展hugo的markdown_流程图mermaid/ ↩︎