上一篇简单介绍了 Markdown 是什么,以及如何使用,本篇就来详细说说 Markdown 的常见语法。
注意,并不是所有编辑器,都支持所有的 Markdown 语法,如果遇到失效的也不必疑惑。
此外,不同的编辑器的语法可能有点不同。
标题
语法格式:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
效果:标题字体一般更大,更醒目,常用于组织文章结构。
强调语法
支持加粗、斜体、下划线等等,还支持互相组合。
加粗
语法:在文本两边各用两个星号
**粗体文本**
效果:粗体文本
斜体
语法:在文本两边各用一个星号或下划线
*斜体文本*
_斜体文本_
效果:斜体文本
分隔线
在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。也可以在星号或是减号中间插入空格。
下面每种写法都可以建立分隔线:
********- - -----------
效果:
删除线
语法:在文本两边各用两个波浪线
~~要被加上删除线的文字~~
效果:要被加上删除线的文字
下划线
语法:通过 HTML 的 <u>
标签来实现
<u>带下划线的文本</u>
效果:带下划线的文本
脚注
脚注是对文本的补充说明,语法:
[^脚注]
然后在文件末尾或其他位置给“脚注”添加内容,语法格式:
[^脚注]: 这是脚注的内容
效果:将鼠标放到“脚注”上时,会出现一个注明框,内容时你定义的内容
注意:有些网站/编辑器不支持该语法
上标/下标
有时候需要输入上标或者下标,例如:
2^2^
H~2~O
效果:
22
H2O
注意:部分编辑器不支持,Typora 的话需要在设置里开启该功能。
粗斜体文本
粗体和斜体的互相组合,语法:
***粗斜体文本***___粗斜体文本___
效果:粗斜体文本
列表
无序列表
使用星号 *
,加号 +
,或是减号 -
作为列表标记:
* 第一项
* 第二项+ 第一项
+ 第二项- 第一项
- 第二项
效果:
-
第一项
-
第二项
-
第一项
-
第二项
-
第一项
-
第二项
建议:在一个列表中始终用同一种写法,不要混用 *
、-
和 +
。
有序列表
使用数字并加上.
号来表示:
1. 第一项
2. 第二项
效果:
- 第一项
- 第二项
带复选框的列表
语法:* [] 任务
,还可以在方括号内填充 x 表示已完成
* [x] 第一项
* [ ] 第二项
* [ ] 第三项
效果:
注意:部分 Markdown 编辑器不支持
列表嵌套
示例:
1. 第一项:- 第一项嵌套的第一个元素- 第一项嵌套的第二个元素
2. 第二项:- 第二项嵌套的第一个元素- 第三层嵌套
效果:
-
第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
-
第二项:
-
第二项嵌套的第一个元素
- 第三层嵌套
-
引用
例如引用名人名言、书籍里的内容时,可以用这个。语法:
> 人类的悲欢并不相通,我只觉得他们吵闹。
效果:
人类的悲欢并不相通,我只觉得他们吵闹。
引用也是可以嵌套的(在引用里还可以使用列表、加粗等语法):
> 第一层
> > 第二层
> > > 第三层
效果:
第一层
第二层
第三层
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 111
> * 222
效果:
区块中使用列表
第一项
第二项
- 111
- 222
超链接
有时候需要引用其他网站,这时候就可以用超链接。语法:
[链接名称](链接地址)
示例:
[谷歌](http://www.google.com)
效果:谷歌
也可以用尖括号将 URL 或 Email 地址变为可点击的链接,示例:
<https://www.peterjxl.com>
效果:<https://www.peterjxl.com>
这里得额外说下,链接还可以用变量来代替。
什么意思呢?有些情况下,一个超链接会经常出现在文章中,那么文章内容就会显得很冗余:
[谷歌](http://www.google.com)(Google),这个全球知名的科技公司,以其卓越的技术和丰富的产品线,深刻影响着我们的生活。以下,我将带您领略[谷歌](http://www.google.com)的魅力,探索其丰富的互联网生态。[谷歌](http://www.google.com),这个充满创新和智慧的科技公司,正以其强大的技术实力和丰富的产品线,不断改变着我们的世界。让我们一起感受[谷歌](http://www.google.com)的魅力,探索更多未知的精彩!
此外,这样还有一个缺点,就是如果网址失效了,还得逐个替换。
为此,我们可以用变量的语法(注意,两个都是方括号):
[Google][1]
然后在文档的结尾(或其他位置),给这个变量 1
复制:
[1]: http://www.google.com/
此时达成的效果,和之前是一样的,但文章内容更精简:
[谷歌][1](Google),这个全球知名的科技公司,以其卓越的技术和丰富的产品线,深刻影响着我们的生活。以下,我将带您领略[谷歌][1]的魅力,探索其丰富的互联网生态。[谷歌][1],这个充满创新和智慧的科技公司,正以其强大的技术实力和丰富的产品线,不断改变着我们的世界。让我们一起感受[谷歌][1]的魅力,探索更多未知的精彩![1]: http://www.google.com
图片
Markdown 支持引用外部图片,包括本地图片和网络图片,语法:
![图片说明](图片链接)
示例:
![老婆](https://image.peterjxl.com/wife.jpg)
![老婆](C:\Documents\wife.png)
效果:展示一张图片
当图片无法被加载的时候(例如图片失效、或断网了),图片说明会被显示出来,这样做至少还能给读者传递出一点有用信息。
此外,还可以使用 HTML 的 img 标签,优点是可以设置图片宽高:
<img src="https://image.peterjxl.com/wife.jpg" width="50px" height="30px">
如果你的文章只会在本地浏览,那么链接使用本地图片路径没有任何问题,但是如果文章需要发布到网上,或者需要在其它电脑上浏览,那么使用本地图片路径的方式就不可行了,因为其他设备可不一定在这个路径上有图片。
所以,通常情况下建议使用网络链接的方式来插入图片,这种方式可以跨设备,通用性更好。
但是这会带来一个问题:自己的图片该如何上传到网上,并且得到其网络链接地址?这就要用到图床了,详情可以参考我的博客搭建系列-图床篇。
PS:图片也可以用超链接的那个变量语法
![老婆][img][img]: https://image.peterjxl.com/wife.jpg
代码块
对于程序员来说,经常需要记录代码块,此时就可以用该语法。
单行代码的语法:用反引号把它包起来( ` )
`alert()`
效果:alert()
如果是多行代码:用三个反引号 ``` 包裹一段代码,并且可以并指定一种语言(指定后有代码高亮)
```javascript
function test() {alert('test')
}
```
效果:
function test() {alert('test')
}
设置目录
自动根据该文件的所有标题来生成一个目录,一般在文章最顶部使用。语法:
[TOC]
效果:自动根据本文的标题生成目录
注意:有些编辑器不支持。
如果你使用 VuePress 搭建博客,请使用
[[toc]]
,不过 VuePress 一般会自动生成目录,不用额外在文章顶部用该语法
表格
基本语法:
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
使用 |
来分隔不同的单元格,使用 -
来分隔表头和其他行。
效果:
表头 | 表头 |
---|---|
单元格 | 单元格 |
单元格 | 单元格 |
还可以设置每一列的对齐方式,在表头下一行里配置即可:
-
-:
:设置内容和标题栏居右对齐 :-
: 设置内容和标题栏居左对齐:-
: 设置内容和标题栏居中对齐
示例:
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
效果:
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
支持 emoji
在 emoji 表情的英文名前后加上冒号即可,语法:
:smirk:
效果:😏
大部分 Markdown 编辑器,在输入冒号再输入表情包英文名首字母会有弹框提示:
想知道更多 emoji,可以去搜索,例如 webfx.com/tools/emoji-cheat-sheet
转义符号
之前说过,井号 #
是 Markdown 的标题标记,>
是引用标记。
而有时候我们想单独展示某个 Markdown 的标记,也就是不想让 Markdown 标记生效,可以在标记的每个符号前加上反斜杠(\
),这样这些符号将按原样显示,不再具有 Markdown 中的特殊意义。如:
不想让引用块标记生效,可以使用 \>
,这样页面将渲染为 >
不想让二级标题标记生效,可以使用 \#\#
,将显示为 ##
最后
Markdown 语法看上去很多,其实常用的就几个,而且都很简单,多练习下就能掌握。
先介绍到这,其实 Markdown 还支持输入数学公式,复杂表格,流程图,时序图,甘特图...
虽然功能的丰富并没有什么本质的缺点,但终归有些背离 Markdown 易读易写的初衷,因此后续单独拿几篇文章来讲。
对于简单的图形来说,这个功能还挺方便,但如果需画复杂的图,还是推荐用专业的图形界面工具。
参考
轻松上手写作利器 Markdown:从此文章排版无烦恼
创始人 John Gruber 的 Markdown 语法说明
Markdown使用教程 | Evan's blog
格外聊聊markdown使用,以及markdown的前世今生? | MaxhyTV