Markdown写作语法

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

常用的Markdown语法规则有:

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

字体加粗倾斜

字体倾斜需要在文本两端各加一个*
字体加粗需要在文本两端各加两个*
字体同时倾斜加粗需要在文本两端各加三个*
字体加入删除线需要在文本两端各加两个~~

示例

1
2
3
4
5
*倾斜的文字*
**加粗的文字**
***倾斜加粗的文字***
~~加删除线的文字~~
++加下划线的文字++

预览效果

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

引用

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

示例

1
2
3
> 引用的文本
>> 嵌套的引用文本
>>> 再次嵌套的文本

预览效果

引用的文本

嵌套的引用文本

再次嵌套的文本

分割线

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

示例

1
2
3
4
5
6
7
***

*****

---

-----

预览效果





图片

使用链接形式插入图片

语法

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

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

超链接

超链接形式和图片类似,删掉前面的!即可

普通链接方法

语法

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或加三个空格
其中有序列表使用符号*+-即可

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- 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)

预览效果

  • C
  • C++
  • Java
  • 嵌套1
    • 嵌套1
      • 嵌套3
  1. C
  2. C++
  3. Java
  1. 嵌套1
    1. 嵌套2
    2. 嵌套2(1)
    3. 嵌套2(2)
      1. 嵌套3
      2. 嵌套3(1)
    4. 嵌套2(3)
  2. 嵌套1(1)

表格

示例

1
2
3
4
表头|表头|表头
-|:-:|-:
内容|内容|内容
内容|内容|内容

其中第二行表示对齐方式

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

预览效果

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

代码

代码使用反引号 ` 表示,反引号是键盘左上角的~键输入,而不是键盘右边的引号
连续三个反引号可以生成代码块,代码块后面的字符表示不同的语言类型,示例中多打了括号

示例

1
2
3
4
5
6
7
8
`Hello World!`
(```cpp)
#include <stdio.h>
int main(void){
printf("Hello World!");
return 0;
}
(```)

预览效果

Hello World!

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

代码块语言说明

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

语言 格式
Bash bash
C# cs
C语言 cpp
CSS css
DOS dos
Go go
HTML xml
ini ini
Matlab matlab
Markdown markdown
makefile makefile
Json json
Java java
JavaScript js / javascript
Objective-C objectivec
PHP php
PowerShell powershell
Processing processing
Python python
R r
Ruby ruby
SQL sql
Swift swift
TeX tex
VBScript vbscript
VB.Net vbnet
Vim Script vim

小文本

在文本两端分别加入<small></small>即可生成小文本

示例
<small>小文本</small>

预览效果

小文本

转义

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

示例

1
2
3
4
5
\#
\*
\!
\+
\-

预览效果

#
*
!
+
-

特殊转义

部分特殊字符需要使用字符串转义

特殊字符 转义符号 中文名称 英文名称
! &#33; 感叹号 Exclamation mark
" &#34; &quot; 双引号 Quotation mark
# &#35; 数字标志 Number sign
$ &#36; 美元标志 Dollar sign
% &#37; 百分号 Percent sign
& &#38; &amp; Ampersand
' &#39; 单引号 Apostrophe
( &#40; 小括号左边部分 Left parenthesis
) &#41; 小括号右边部分 Right parenthesis
* &#42; 星号 Asterisk
+ &#43; 加号 Plus sign
< &#60; &lt; 小于号 Less than
= &#61; 等于符号 Equals sign
- &#45; &minus; 减号 Minus
> &#62; &gt; 大于号 Greater than
? &#63; 问号 Question mark
@ &#64; 艾特 Commercial at
[ &#91; 中括号左边部分 Left square bracket
\ &#92; 反斜杠 Reverse solidus (backslash)
] &#93; — 中括号右边部分 Right square bracket
{ &#123; 大括号左边部分 Left curly brace
| &#124; 竖线 Vertical bar
} &#125; 大括号右边部分 Right curly brace
&emsp; 空格 Space

字体颜色大小

  • Hexo只支持黑色字体,可以使用Html语言调整颜色,使用<font color="ff0000"></font>包裹需要变色的字体,ff0000可以替换为其他颜色代码。
  • 字号同样使用Html语言调整,使用<font size=12></font>包裹需要改变大小的字体,font size=后是调整的字号。
  • 字体同样使用Html语言调整,使用<font face="华文彩云"></font>包裹需要改变的字体,font face=后是调整的字体名称。
  • 颜色字号字体三者可以叠加使用

示例

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

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

字体居中

字体居中同样使用Html语言包裹,有三种格式
示例

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

预览

这是居中字体

这是居中字体

这是居中字体

勾选框

一种类似todo list的东西
示例

1
- [ ]这是勾选框

预览

  • [ ]这是勾选框

首行缩进

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

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

预览
  这是首行缩进的文本

链接到其他文章

Hexo支持引入其他文章链接,语法为,其中slug是要引用markdown的文件名,title是引用文章的标题

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

预览

[Hexo博客指北]

文字背景色

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

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

示例

亮蓝色背景色

Note标签

配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note tag (bs-callout)
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-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
border_radius: 3
# 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

用法

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

1
2
3
4
5
6
7
<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的风格,@后输入显示的内容
示例

1
2
3
4
5
6
{% label [email protected]这是default %}
{% label [email protected]这是primary %}
{% label [email protected]这是success %}
{% label [email protected]这是info %}
{% label [email protected]这是warning %}
{% label [email protected]这是danger %}

**预览

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

Tab tag选项卡

配置

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

1
2
3
4
5
6
7
# Tabs tag
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 0

用法

自定义的选项较多
示例

1
2
3
4
5
6
7
8
9
10
11
{% 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

1
2
3
4
5
6
7
8
9
10
11
{% 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.

示例
选项的名称和图标可以自定义,在<!-- tab 自定义名称@自定义图标 -->中调整

1
2
3
4
5
6
7
8
9
10
11
{% tabs Third unique name %}
<!-- tab Solution [email protected] -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution [email protected] -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution [email protected] -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

预览

This is Tab 1.

This is Tab 2.

This is Tab 3.

按钮

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//只显示文字,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)

插入音乐/视频

因为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>标签

示例

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

1
2
3
4
5
6
img {
box-sizing: border-box;
margin: 0 auto 25px;
padding: 3px;
border: none;
}

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

注意

图片后缀大小写要匹配

标题

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

示例

1
2
3
4
5
6
7
8
9
10
11
12
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

大标题
===

小标题
---

预览效果

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

大标题

小标题

完成

Hexo中常用的Markdown语法大概就这些了,填坑结束~