Markdown语法糖

前言

Markdown 是一种轻量级的标记语言,其用简单的标记语法便可达到排版的目的,可以使我们更加专注于内容的编写,而不需过多关注排版。
本文主要整理了 Markdown 中的常用的标记语法,以便自己与他人以后查用。

优点

  • 纯文本,所以兼容性极强,可以用所有文本编辑器打开。
  • 让你专注于文字而不是排版。
  • 格式转换方便,Markdown 的文本你可以轻松转换为 html、电子书等。
  • Markdown 的标记语法有极好的可读性。

缺点

  • 需要记一些语法(当然,是很简单。五分钟学会)。
  • 有些平台不支持Markdown编辑模式。

基本语法

标题

在想要设置为标题的文字前面加#来表示,一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

注:#与文字之间要有一个空格。

示例:

1
2
3
4
5
6
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

效果如下:
标题演示


字体

星号或者下划线都可以,单是斜体,双是粗体,符号可以跨行,符号可加空格。

  • 加粗
    要加粗的文字左右分别用两个*号包起来

  • 斜体
    要倾斜的文字左右分别用一个*号包起来

  • 斜体加粗
    要倾斜和加粗的文字左右分别用三个*号包起来

  • 删除线
    要加删除线的文字左右分别用两个~~号包起来

示例:

1
2
3
4
**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

效果如下:
字体演示

引用

在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>
n个…
貌似可以一直加下去,但没神马卵用。

示例:

1
2
3
>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容

效果如下:
引用演示

分割线

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

示例:

1
2
3
4
---
----
***
*****

效果如下:
可以看到,显示效果是一样的。
分割线演示

图片

语法:

1
2
3
4
![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

示例:

1
![一脸懵逼](https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558179968948&di=1c8a7432843fdaafb91e9cbffacd1557&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F02%2F20160802213915_x23St.thumb.700_0.jpeg "一脸懵逼")

效果如下:
图片演示

超链接

语法:

1
2
[超链接名](超链接地址 "超链接title")
title可加可不加

示例:

1
2
[简书](http://jianshu.com)
[百度](http://baidu.com)

效果如下:
简书
百度
注:Markdown本身语法不支持链接在新页面中打开,如果想要在新页面中打开的话可以用html语言的a标签代替。

1
2
3
4
<a href="超链接地址" target="_blank">超链接名</a>

示例
<a href="https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank">简书</a>

索引超链接

示例:

1
2
[百度][1]
[1]:http://www.baidu.com

效果如下:
[百度][1]
[1]:http://www.baidu.com

自动链接

语法:使用尖括号。

示例:

1
2
<http://www.baidu.com>
<1111111@qq.com>

效果如下:
http://www.baidu.com
1111111@qq.com

列表

无序列表

语法:
无序列表用 - + * 任何一种都可以。

1
2
3
4
5
- 列表内容
+ 列表内容
* 列表内容

注意:- + * 跟内容之间都要有一个空格

效果如下:

  • 列表内容
  • 列表内容
  • 列表内容

有序列表

语法:
数字加点。

1
2
3
4
5
1. 列表内容
2. 列表内容
3. 列表内容

注意:序号跟内容之间要有空格

效果如下:

  1. 列表内容
  2. 列表内容
  3. 列表内容

嵌套列表

语法:
上一级和下一级之间敲三个空格即可

  • 一级无序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容

  • 一级无序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容

  1. 一级有序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容

  1. 一级有序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容

注意:在使用列表时,只要是数字后面加上英文的点,就会无意间产生列表,比如2019.5.18 这时候想表达的是日期,有些软件把它被误认为是列表。解决方式:在每个点前面加上\就可以了。如所示:
示例:

1
2019\.5\.18

效果如下:
2019.5.18


表格

Markdown表格

语法:

1
2
3
4
5
6
7
8
9
10
11
|表头|表头|表头|
|---|:---:|---:|
|内容|内容|内容|
|内容|内容|内容|

第二行分割表头和内容。
- 有一个就行,为了对齐,多加了几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略

示例1:

1
2
3
4
5
| 法号        | 本领    |  排行  |
| :--------: | :-----: | :----: |
| 悟空 | 72变 | 大师兄|
| 悟能 | 36变 | 二师哥|
| 悟净 | 18变 | 三师弟|

效果如下:

法号 本领 排行
悟空 72变 大师兄
悟能 36变 二师哥
悟净 18变 三师弟

示例2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
表头1  | 表头2
------------- | -------------
Content Cell | Content Cell
Content Cell | Content Cell

| 表头1 | 表头2|
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |

| 名字 | 描述 |
| ------------- | ----------- |
| Help | Display the help window.|
| Close | Closes a window |

表格中也可以使用普通文本的删除线,斜体等效果

| 名字 | 描述 |
| ------------- | ----------- |
| Help | ~~Display the~~ help window.|
| Close | _Closes_ a window |

表格可以指定对齐方式

| 左对齐 | 居中 | 右对齐 |
| :------------ |:---------------:| -----:|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

效果如下:

表头1 表头2
Content Cell Content Cell
Content Cell Content Cell
表头1 表头2
Content Cell Content Cell
Content Cell Content Cell
名字 描述
Help Display the help window.
Close Closes a window
名字 描述
Help Display the help window.
Close Closes a window
左对齐 居中 右对齐
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1

HTML表格

语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<tr>
<th>项目1</th>
<th>项目2</th>
<th>项目3</th>
</tr>
<tr>
<td>a1</td>
<td colspan="2">a2</td>
</tr>
<tr>
<td rowspan="2">b1</td>
<td>b2</td>
<td>b3</td>
</tr>
<tr>
<td>c2</td>
<td>c3</td>
</tr>
</table>

效果:

项目1 项目2 项目3
a1 a2
b1 b2 b3
c2 c3

需要注意的一点是,在markdown中使用html代码来实现表格的效果,需要在表格的外面套上:

1
<escape></escape>

(转义),防止markdown直接将代码中的行进行转义成回车,不然会出现表格前空了一大块空白。

但同时,引入html会使得markdown的易读易写的特性降低。除非必要,还是推荐使用markdown本身的表格语法。
那么,我们如何在使用html表格的时候,偷懒不用打这段表格呢?

http://www.tablesgenerator.com/

安利这个网站,它可以实现你的需求,包括合并单元格等。

代码

单行代码

语法:
代码之间分别用一个反引号包起来。

1
`代码内容`

示例:

1
`create database hero;`

效果如下:

create database hero;

代码块

语法:
代码之间分别用三个反引号包起来,且两边的反引号单独占一行。

1
2
3
4
5
(```)
代码...
代码...
代码...
(```)

注:为了防止转译,前后三个反引号处加了小括号,实际是没有的。这里只是用来演示,实际中去掉两边小括号即可。

示例:

1
2
3
4
5
6
(```)
function fun(){
echo "这是一句非常牛逼的代码";
}
fun();
(```)

效果如下:

1
2
3
4
function fun(){
echo "这是一句非常牛逼的代码";
}
fun();

注释

语法:用html的注释

1
<!-- 用html的注释 -->

转义字符

Markdown中的转义字符为\,转义的有:

1
2
3
4
5
6
7
8
9
10
11
12
\\ 反斜杠
\` 反引号
\* 星号
\_ 下划线
\{\} 大括号
\[\] 中括号
\(\) 小括号
\# 井号
\+ 加号
\- 减号
\. 英文句号
\! 感叹号

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

其他特殊字符

示例:

1
2
3
4
5
6
7
8
9
10
11
&#10084
&#10003
&#9728
&#9733
&#9730
&#9775
&#9762
&#9742
&#8734
&#10052
&#9835

效果如下:

&#10084
&#10003
&#9728
&#9733
&#9730
&#9775
&#9762
&#9742
&#8734
&#10052
&#9835

想知道字符对应的Unicode码,可以看这个网站:https://unicode-table.com/cn/

流程图

效果如下:

段落与换行

Markdown中段落指连续的一段文字,编写时段落之间至少一个空行隔开,段落内多个空格被视为一个空格,段首不支持缩进。
如何想要在显示时显示多个空行,可以插入实现,注意的是,插入的应与前后的段落中间至少空一行。

段落缩进(空格)

示例:

1
2
3
4
半方大的空白&ensp;或&#8194;看,飞碟
全方大的空白&emsp;或&#8195;看,飞碟
不断行的空白格&nbsp;或&#160;看,飞碟
&emsp;&emsp;段落从此开始。

效果如下:
半方大的空白 或 看,飞碟
全方大的空白 或 看,飞碟
不断行的空白格 或 看,飞碟
  段落从此开始。

字体、字号、颜色、背景色

示例:

1
2
3
4
5
6
7
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=12 face="黑体">黑体</font>
<font color=#00ffff size=3>null</font>
<font color=gray size=5>gray</font>
<table><tr><td bgcolor=#FF4500>这里的背景色是:OrangeRed, 十六进制颜色值:#FF4500, rgb(255, 69, 0)</td></tr></table>

效果如下:
我是黑体字
我是微软雅黑
我是华文彩云
黑体
null
gray

这里的背景色是:OrangeRed, 十六进制颜色值:#FF4500, rgb(255, 69, 0)

快捷键

功能 快捷键
加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

GitHub特有特性

复选框列表

在列表符号后面加上[]或者[x]代表选中或者未选中情况。
示例:

1
2
3
4
5
6
7
+ [x] C
+ [x] C++
+ [x] Java
+ [x] Qt
+ [x] Android
+ [ ] C#
+ [ ] .NET

效果如下:

  • C
  • C++
  • Java
  • Qt
  • Android
  • C#
  • .NET

emoji表情符号

emoji表情使用:EMOJICODE:的格式,详细列表可见:
https://www.webpagefx.com/tools/emoji-cheat-sheet/
当然现在很多markdown工具或者网站都不支持。

下面列出几个平台的对比:

工具/网站 emoji
简书
github
有道云笔记

本文标题:Markdown语法糖

文章作者:王洪博

发布时间:2018年02月27日 - 16:02

最后更新:2019年09月12日 - 02:09

原始链接:http://whb1990.github.io/posts/43883629.html

▄︻┻═┳一如果你喜欢这篇文章,请点击下方"打赏"按钮请我喝杯 ☕
0%