Markdown 常用语法

上一篇简单介绍了 Markdown 是什么,以及如何使用,本篇就来详细说说 Markdown 的常见语法。

注意,并不是所有编辑器,都支持所有的 Markdown 语法,如果遇到失效的也不必疑惑。

此外,不同的编辑器的语法可能有点不同。

标题

语法格式:

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

效果:标题字体一般更大,更醒目,常用于组织文章结构。

强调语法

支持加粗、斜体、下划线等等,还支持互相组合。

加粗

语法:在文本两边各用两个星号

**粗体文本**

效果:粗体文本

斜体

语法:在文本两边各用一个星号或下划线

*斜体文本*
_斜体文本_

效果:斜体文本

分隔线

在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。也可以在星号或是减号中间插入空格。

下面每种写法都可以建立分隔线:

***

*****

- - -

----------

效果:





删除线

语法:在文本两边各用两个波浪线

~~要被加上删除线的文字~~

效果:要被加上删除线的文字

下划线

语法:通过 HTML 的 <u>​ 标签来实现

<u>带下划线的文本</u>

效果:带下划线的文本

脚注

脚注是对文本的补充说明,语法:

[^脚注]

然后在文件末尾或其他位置给“脚注”添加内容,语法格式:

[^脚注]: 这是脚注的内容

效果:将鼠标放到“脚注”上时,会出现一个注明框,内容时你定义的内容

注意:有些网站/编辑器不支持该语法

上标/下标

有时候需要输入上标或者下标,例如:

2^2^
H~2~O

效果:

22

H2O

注意:部分编辑器不支持,Typora 的话需要在设置里开启该功能。

粗斜体文本

粗体和斜体的互相组合,语法:

***粗斜体文本***
 ___粗斜体文本___

效果:粗斜体文本

列表

无序列表

使用星号 *​ ,加号 +​ ,或是减号 -​ 作为列表标记:

* 第一项
* 第二项

+ 第一项
+ 第二项

- 第一项
- 第二项 

效果:

  • 第一项

  • 第二项

  • 第一项

  • 第二项

  • 第一项

  • 第二项

建议:在一个列表中始终用同一种写法,不要混用 *​ 、-​ 和 +​。

有序列表

使用数字并加上.​ 号来表示:

1. 第一项
2. 第二项

效果:

  1. 第一项
  2. 第二项

带复选框的列表

语法:* [] 任务​,还可以在方括号内填充 x 表示已完成

* [x] 第一项
* [ ] 第二项
* [ ] 第三项

效果:

注意:部分 Markdown 编辑器不支持

列表嵌套

示例:

1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项:
    - 第二项嵌套的第一个元素
       - 第三层嵌套

效果:

  1. 第一项:

    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项:

    • 第二项嵌套的第一个元素

      • 第三层嵌套

引用

例如引用名人名言、书籍里的内容时,可以用这个。语法:

> 人类的悲欢并不相通,我只觉得他们吵闹。

效果:

人类的悲欢并不相通,我只觉得他们吵闹。

引用也是可以嵌套的(在引用里还可以使用列表、加粗等语法):

> 第一层
> > 第二层
> > > 第三层

效果:

第一层

第二层

第三层

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 111
> * 222

效果:

区块中使用列表

  1. 第一项

  2. 第二项

    • 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 一般会自动生成目录,不用额外在文章顶部用该语法

表格

基本语法:

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

使用 |​ 来分隔不同的单元格,使用 -​ 来分隔表头和其他行。

效果:

表头 表头
单元格 单元格
单元格 单元格

还可以设置每一列的对齐方式,在表头下一行里配置即可:

  • -: ​:设置内容和标题栏居右对齐
  • :-​: 设置内容和标题栏居左对齐
  • :-​ : 设置内容和标题栏居中对齐

示例:

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

效果:

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

‍此外,如果你想将 Excel 表格的一些内容复制到 Markdown 编辑器,可以直接试试在 Excel 里复制,然后在 Markdown 编辑器里粘贴,一般都是兼容的。反过来也一样,在 Markdown 里的表格可以直接复制到 Excel 里。

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

posted @ 2024-07-29 15:33  peterjxl  阅读(63)  评论(0编辑  收藏  举报