Markdown写作语法

发表于 2019-04-05 更新于 2022-06-12 分类于网站配置阅读次数：本文字数： 12k 阅读时长 ≈ 11 分钟

编写博客需要使用Markdown，因此需要熟记语法规则，虽然Markdown语法比较少，但是一个一个查起来也是很蛋疼的（~~目录被标题的预览搞乱了。。。~~）

常用的Markdown语法规则有：

标题（我把标题扔到网页最后面了，目录被打乱了。。。）
字体加粗倾斜
引用
分割线
图片
超链接
列表
表格
代码
小文本
特殊字符转义
字体颜色大小
文本居中
勾选框
首行缩进
链接到其他文章
文字背景色
标签
选项卡
按钮

字体加粗倾斜

字体倾斜需要在文本两端各加一个*号
字体加粗需要在文本两端各加两个*号
字体同时倾斜加粗需要在文本两端各加三个*号
字体加入删除线需要在文本两端各加两个~~
Markdown不支持下划线，需要用html的标签实现

示例

*倾斜的文字*
**加粗的文字**
***倾斜加粗的文字***
~~加删除线的文字~~
<u>加下划线的文字</u>

预览效果

倾斜的文字
加粗的文字
倾斜加粗的文字
~~加删除线的文字~~
加下划线的文字

引用

引用需要在文本前加一个>,引用可以嵌套，比如两个>>或三个>>>

示例

1
2
3

> 引用的文本
>> 嵌套的引用文本
>>> 再次嵌套的文本

预览效果

引用的文本
嵌套的引用文本
再次嵌套的文本

分割线

分割线使用连续三个及以上的*或-实现，前后都有段落时各空出一行

示例

***

*****

---

-----

预览效果

超链接

语法

1	[超链接名称](超链接地址)

示例

1	[Github](https://github.com)

预览效果

Github

已废弃的老用法

普通链接方法

语法

1	[超链接名称](超链接地址超链接title)

超链接title选填，鼠标悬浮时显示

示例

1	[Github](https://github.com github)

预览效果

[Github](https://github.com Github)

高级链接方法

示例

1
2
3

使用1作为变量 [Github][1]
	在末尾为1赋值
[1]:https://github.com github

预览效果

使用1作为变量 [Github][1]
在末尾为1赋值
[1]:https://github.com

列表

列表分为有序列表和无序列表,都可以嵌套，嵌套时在下一个列表前加Tab或加三个空格
其中有序列表使用符号*或+或-即可

示例

- C
+ C++
* Java

- 嵌套1
	- 嵌套2
		- 嵌套3

1. C
2. C++
3. Java

1. 嵌套1
	1. 嵌套2
	2. 嵌套2（1）
	3. 嵌套2（2）
		1. 嵌套3
		2. 嵌套3（1）
	2. 嵌套2（3）
2. 嵌套1（1）

预览效果

Java

嵌套1
- 嵌套1
  - 嵌套3

C
C++
Java
嵌套1
1. 嵌套2
2. 嵌套2（1）
3. 嵌套2（2）
  1. 嵌套3
  2. 嵌套3（1）
4. 嵌套2（3）
嵌套1（1）

表格

示例

表头|表头|表头
-|:-:|-:
内容|内容|内容
内容|内容|内容

其中第二行表示对齐方式

默认为左对齐，只写-
居中为:-:
右对齐为-:

预览效果

表头	表头	表头
内容	内容	内容
内容	内容	内容

代码

代码使用反引号 ` 表示，反引号是键盘左上角的~键输入，而不是键盘右边的引号
连续三个反引号可以生成代码块，如果想要在代码块里再嵌套代码块的话，外围的代码块要比里面的多打3个反引号，以此类推。代码块后面的字符表示不同的语言类型，示例中多打了中括号

简单语法

示例

[```cpp]
  #include <stdio.h>
  int main(void){
    printf("Hello World!");
      return 0;
  }
[```]

预览效果

#include <stdio.h>
int main(void){
	printf("Hello World!");
    return 0;
}

高级语法

注意这里链接和链接文本必须同时存在，且链接格式正确，否则都会被看作是标题
示例

```[语言] [标题] [链接] [链接文本]
  #include <stdio.h>
  int main(void){
    printf("Hello World!");
      return 0;
  }
```

预览效果

我是标题我是链接文本

#include <stdio.h>
int main(void){
	printf("Hello World!");
    return 0;
}

代码块语言说明

Hexo默认使用highlight.js实现代码高亮，下面的是常用的语言样式写法，更多样式请移步官网

三个反引号后面的语言格式说明

语言	格式
Bash	bash, sh, zsh
C#	csharp, cs
C	c,h
C++	cpp, hpp, cc, hh, c++, h++, cxx, hxx
CSS	css
Django	django, jinja
DOS	dos, bat, cmd
Excel	excel, xls, xlsx
Go	go, golang
HTML	xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
ini	ini
JSON	json
Java	java, jsp
JavaScript	javascript, js, jsx
LaTeX	tex
Matlab	matlab
Markdown	markdown, md, mkdown, mkd
Makefile	makefile, mk, mak, make
Nginx	nginx, nginxconf
Objective-C	objectivec, mm, objc, obj-c, obj-c++, objective-c++
PHP	php
PostgreSQL & PL/pgSQL	pgsql, postgres, postgresql
PowerShell	powershell, ps, ps1
Processing	processing
Python	python, py, gyp
R	r
Ruby	ruby, rb, gemspec, podspec, thor, irb
SQL	sql
Shell	shell, console
Stylus	stylus, styl
Swift	swift
TypeScript	typescript, ts
VBScript	vbscript, vbs, vb
VB.Net	vbnet
Vim Script	vim
x86 Assembly	x86asm
YAML	yml, yaml

小文本

在文本两端分别加入和即可生成小文本

示例
小文本

预览效果

小文本

转义

在使用一些特殊符号(如#)时需要在符号前加\进行转义，否则符号不会正确显示

示例

\#
\*
\!
\+
\-

预览效果

#
*
!
+
-

特殊转义

部分特殊字符需要使用字符串转义，下面是参考表，并不是所有的地方都需要转义，仅供参考

特殊字符	转义符号	中文名称	英文名称
“!”	`!`	感叹号	Exclamation mark
"	`"` `"`	双引号	Quotation mark
#	`#`	数字标志	Number sign
$	`$`	美元标志	Dollar sign
%	`%`	百分号	Percent sign
&	`&` `&`	与	Ampersand
'	`'`	单引号	Apostrophe
(	`(`	小括号左边部分	Left parenthesis
)	`)`	小括号右边部分	Right parenthesis
*	`*`	星号	Asterisk
+	`+`	加号	Plus sign
<	`<` `<`	小于号	Less than
=	`=`	等于符号	Equals sign
-	`-` `−`	减号	Minus
>	`>` `>`	大于号	Greater than
?	`?`	问号	Question mark
@	`@`	艾特	Commercial at
[	`[`	中括号左边部分	Left square bracket
\	`\`	反斜杠	Reverse solidus (backslash)
]	`]`	— 中括号右边部分	Right square bracket
{	`{`	大括号左边部分	Left curly brace
\|	`\|`	竖线	Vertical bar
}	`}`	大括号右边部分	Right curly brace
&emsp;	`&emsp;`	空格	Space

字体颜色大小

Hexo只支持黑色字体，可以使用Html语言调整颜色，使用和包裹需要变色的字体，ff0000可以替换为其他颜色代码。
字号同样使用Html语言调整，使用和包裹需要改变大小的字体，font size=后是调整的字号。
字体同样使用Html语言调整，使用和包裹需要改变的字体，font face=后是调整的字体名称。
颜色字号字体三者可以叠加使用

示例

<font color="ff0000">这是红色字</font>
<font size=2>这是2号字</font>
<font face="华文彩云">这是华文彩云字</font>
<font face="华文彩云" size=2 color="ff0000">这是2号红色华文彩云字</font>

预览
这是红色字
这是2号字
这是华文彩云字
这是2号红色华文彩云字

字体居中

字体居中同样使用Html标记包裹
示例

1	<center>这是居中字体</center>

这是居中字体

已废弃的老用法

示例

1
2
3

{% centerquote %}这是居中字体{% endcenterquote %}
 <blockquote class="blockquote-center">这是居中字体</blockquote>
{% cq %}这是居中字体{% endcq %}

预览

这是居中字体

勾选框

一种类似todo list的东西，注意这里不能点击交互，只能做展示用
示例

1 2	- [ ] 这是没勾的勾选框 - [x] 这是勾上的勾选框

预览

这是没勾的勾选框
这是勾选框

已失效的首行缩进

首行缩进（已失效）

Hexo会把缩进的空格忽略掉，所以需要使用转义来进行首行缩进

示例

1	&emsp;&emsp;这是首行缩进的文本

预览
&emsp;&emsp;这是首行缩进的文本

链接到其他文章

Hexo支持引入其他文章链接，语法为{% post_path slug %}和{% post_link slug [title] %},其中slug是要引用markdown的文件名，title是引用文章的标题

1	{% post_link Hexo博客踩坑指北 [Hexo博客指北] %}

预览

[Hexo博客指北]

文字背景色

文字背景色需要使用Html表格设置，在bgcolor后设置文字背景色，使用颜色英文名
预览

1	<table><tr><td bgcolor=lightblue>背景色yellow</td></tr></table>

示例

亮蓝色背景色

Note标签

配置

需要在Next主题配置文件中选择样式，打开_config.next.yml并搜索Note tag (bs-callout),下面是我的配置,style共有4种，预览可以在这里查看，icon用于设置是否显示图标。Note中的标题同样会显示在目录中。

# Note tag (bootstrap callout)
note:
  # Note tag style values:
  #  - simple    bootstrap callout old alert style. Default.
  #  - modern    bootstrap callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: flat
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

使用方法

1
2
3

{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}

[class] : 可选参数，控制Note的种类，一共有6种
- default
- primary
- success
- info
- warning
- danger.
[no-icon] : 可选参数，开启后会不显示Note的图标.
[summary] : 可选参数，作为对Note内容的总结概括，开启后剩余内容将被折叠。

实例

{% note %}
### 啥都没有的默认样式
我是啥都没有的默认样式
{% endnote %}

啥都没有的默认样式

我是啥都没有的默认样式

{% note default %}
### 默认样式
我是默认样式
{% endnote %}

{% note primary %}
### primary样式
我是primary样式
{% endnote %}

{% note info %}
### info样式
我是info样式
{% endnote %}

{% note success %}
### success样式
我是success样式
{% endnote %}

{% note warning %}
### warning样式
我是warning样式
{% endnote %}

{% note danger %}
### danger样式
我是danger样式
{% endnote %}

默认样式

我是默认样式

primary样式

我是primary样式

info样式

我是info样式

success样式

我是success样式

warning样式

我是warning样式

danger样式

我是danger样式

{% note info no-icon %}
### 无图标的info样式
我是无图标的info样式
{% endnote %}

无图标的info样式

我是无图标的info样式

{% note info 带summary的样式 %}
### 带summary的样式
我是带summary的样式
{% endnote %}

带summary的样式

我是带summary的样式

老方法（不推荐）

使用<div>包裹需要显示的内容，class后面显示note的风格，加上no-icon可以隐藏图标
示例

<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note default no-icon"><p>danger no-icon</p></div>

预览

default

primary

success

info

warning

danger

danger no-icon

Label标签

在@前调整label的风格，@后输入显示的内容
示例

{% label default@这是default %}
{% label primary@这是primary %}
{% label success@这是success %}
{% label info@这是info %}
{% label warning@这是warning %}
{% label danger@这是danger %}

**预览

这是default 这是primary 这是success 这是info 这是warning 这是danger

Tab tag选项卡

配置

在Next主题文件中搜索Tabs tag，然后将enable设置为true，下面是我的配置

# Tabs tag
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

用法

自定义的选项较多
示例

{% tabs First unique name %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预览

This is Tab 1.

This is Tab 2.

This is Tab 3.

示例
第一行的数字3表示默认显示的Tabs,设置为-1时表示不显示默认Tabs

{% tabs Second unique name, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预览

This is Tab 1.

This is Tab 2.

This is Tab 3.

示例
选项的名称和图标可以自定义，在中调整

{% tabs Third unique name %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution 2@code -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预览

This is Tab 1.

This is Tab 2.

This is Tab 3.

按钮

示例
使用button或者btn，在两者后面加入要跳转的链接，不加链接的话默认跳转到当前页面

//只显示文字，Text是文字内容
{% button https://siriusq.top/, 主页 %}

//多个按钮并列
{% btn https://siriusq.top/, 主页 %} {% btn #, Text & Title,, Title %}

//只显示图标
<p>{% btn https://siriusq.top/,, home fa-5x %}
{% btn #,, home fa-4x %}
{% btn #,, home fa-3x %}{% btn #,, home fa-2x %}{% btn #,, home fa-lg %}{% btn #,, home %}</p>

//显示文字和图标
<p>{% btn #, Text & Icon (buggy), home %}
{% btn #, Text & Icon (fixed width), home fa-fw %}</p>

预览
只显示文字

主页

多个按钮并列

主页 Text & Title

只显示图标

显示文字和图标

Text & Icon (buggy) Text & Icon (fixed width)

Link Grid 链接格网

可以单个用，也可以组合成格网。

示例

1
2
3

{% linkgrid %}
Siriusq | https://siriusq.top/ | May the Force be with you. | /images/apple-touch-icon-next.png
{% endlinkgrid %}

Siriusq

May the Force be with you.

{% linkgrid %}
Siriusq | https://siriusq.top/ | May the Force be with you. | /images/apple-touch-icon-next.png
Siriusq | https://siriusq.top/ | May the Force be with you. | /images/apple-touch-icon-next.png
Siriusq | https://siriusq.top/ | May the Force be with you. | /images/apple-touch-icon-next.png
Siriusq | https://siriusq.top/ | May the Force be with you. | /images/apple-touch-icon-next.png
{% endlinkgrid %}

Siriusq

May the Force be with you.

Siriusq

May the Force be with you.

Siriusq

May the Force be with you.

Siriusq

May the Force be with you.

插入音乐/视频

因为Github Page提供的空间有限，音乐和视频建议上传到B站或Youtube等平台，通过Html语言嵌入，直接复制网页提供的分享链接即可，使用width设置宽度，height设置高度

`<video>`标签

使用source src设置视频路径
示例

1
2
3

<video width="480" height="320" controls>
<source src="movie.mp4">
</video>

预览（并没有视频）

`<embed>`标签

示例

<embed src='http://player.youku.com/player.php/sid/XMzUzNjg1OTQzNg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

预览（随便放的）

`<iframe>`标签

示例

1	<iframe height=400 width=600 src="//player.bilibili.com/player.html?aid=14176961&cid=23141262&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

预览（自己的B站软广）
下面的链接是通过网页端的分享 - 嵌入代码获取的，直接复制就行

插入图片

步骤如下

安装图片插件
- 在博客根目录中运行Git bash
- 输入命令npm install hexo-asset-image等待安装完成
修改配置文件
- 打开博客根目录的_config.yml
- 搜索psot_asset_folder并将其设置为true
使用方法
- 使用命令hexo new "title"创建新博文时会生成一个同名文件夹
- 将要插入的图片放入同名文件夹中
- 使用markdown格式引入图片，下面三种都可以,最后一种可以通过后面的数字控制大小
  1
  2
  3
  ![替代文字](博客标题/图片名.JPG)
  ![替代文字](/博客标题/图片名.JPG)
  {% img full-image /博客标题/图片名.JPG 180 180 图片名 %}
- 运行hexo s即可本地查看效果

格式

示例

1
2
3

![替代文字](Markdown写作语法/201904133.JPG)
![替代文字](/Markdown写作语法/201904133.JPG)
{% img full-image /Markdown写作语法/201904133.JPG 180 180 图片名 %}

预览

替代文字

已废弃的老用法

Next 8 已废弃的老用法

使用链接形式插入图片

1	![图片alt](图片url 图片title)

其中图片alt为图片下面的文字，相当于注释，图片url为图片的地址，图片title为鼠标悬浮到图片上显示的内容，此项选填

一点微小的工作

Next主题默认会在图片四周生成一圈灰色边框影响美观，对此需要修改博客目录\themes\next\source\css\_common\components\post中的post-expand.styl文件。
在文件中搜索img，并将其修改为

img {
    box-sizing: border-box;
    margin: 0 auto 25px;
    padding: 3px;
    border: none;
  }

重新部署后灰色边框就会消失

注意

图片后缀大小写要匹配

标题

在文字前加#和空格，支持六级标题和大小标题，一定不要漏了空格，空格漏掉的话会和普通字符一样显示

示例

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

大标题
===

小标题
---

字体加粗倾斜

引用

分割线

超链接

普通链接方法

高级链接方法

列表

表格

代码

简单语法

高级语法

代码块语言说明

小文本

转义

特殊转义

字体颜色大小

字体居中

勾选框

首行缩进（已失效）

链接到其他文章

文字背景色

Note标签

配置

使用方法

实例

啥都没有的默认样式

默认样式

primary样式

info样式

success样式

warning样式

danger样式

无图标的info样式

带summary的样式

老方法（不推荐）

Label标签

Tab tag选项卡

配置

用法

按钮

Link Grid 链接格网

示例

插入音乐/视频

<video>标签

<embed>标签

<iframe>标签

插入图片

步骤如下

格式

Next 8 已废弃的老用法

一点微小的工作

注意

标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

大标题

小标题

完成

`<video>`标签

`<embed>`标签

`<iframe>`标签