介绍 Hexo里的 Markdown 的基础功能和 Hugo 加持的高级功能。

一、Hugo 原生支持 Markdown 语法

1.1 标题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题  

1.2 段落格式

1.2.1 粗体、斜体、粗斜体

• 这是*包裹的斜体文本

• 这是**包裹的粗体文本

• 这是***包裹的粗斜体文本

1.2.2 上标下标

• 上标：使用公式 $X^2$ → $X^2$

• 下标：

  • 使用<sub>包裹文本，如 H<sub>2</sub>O → H2O
  • 使用公式 $H_2O$ → $H_2O$

• 高亮：使用==包裹文本，如==highlight== ==highlight==

• 删除线：使用~~包裹文本，如~~删除线~~ 删除线

• 下划线：

  • 使用<u>包裹文本，如<u>带下划线文本</u> 带下划线文本
  • 使用++包裹文本，如++带下划线文本++ ++带下划线文本++

• 表情：使用:包裹表情，如:+1: :+1: :u6e80: :u6e80: 全部表情 常用表情

• 脚注：

  1 2	脚注[^脚注文本] [^脚注文本]: 脚注的内容

  脚注¹

• 分隔线：3 个及以上连续的---

1.3 列表

1.3.1 无序列表

在-后面带一个空格，不推荐使用 + 和 *。

• 无序列表 -

• 无序列表 -

• 无序列表 -

• 无序列表 *

• 无序列表 +

1.3.2 有序列表

在阿拉伯数字后面带一个.和一个空格

1. 有序列表1.
2. 有序列表2.

1.3.3 列表嵌套

• 在无序列表中嵌套对象，需要在对象的行首放置 2 个空格。

• 在有序列表中嵌套对象，需要在对象的行首放置 3 个空格。

• 列表嵌套 -

  1. 列表嵌套 -1.
  • 列表嵌套 --

1. 列表嵌套 1.
   1. 列表嵌套 1.1.
   • 列表嵌套 1.-

1.3.4 任务列表

在 + 后面带一个空格，在空格后再带一个 [ ] ， [ ] 的后面再带一个空格， [ ] 里面为一个空格时表示任务未完成， [ ] 里面为一个 x 时表示任务已完成。不推荐使用 - 和 *。

• 已完成任务 + [x]

• 待完成任务 + [ ]

  • 待完成任务 __+ [ ]

• 已完成任务 - [x]

• 已完成任务 * [x]

1.4 表格

• 用 | 分隔单元格，用 - 分隔表头和其他行，用 : 控制对齐方式

1
2
3
4

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

1.5 区块引用

1.5.1 区块引用

• 在行首放置 1 个 >

区块引用

1.5.2 区块引用嵌套

在行首放置多个 > ，段落和列表的下一行放置 > 时会自动对区块引用进行嵌套

最一层

第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套第二层嵌套

第三层嵌套第三层嵌套第三层嵌套第三层嵌套第三层嵌套 第三层嵌套第三层嵌套第三层嵌套第三层嵌套第三层嵌套 第三层嵌套第三层嵌套第三层嵌套第三层嵌套第三层嵌套 第三层嵌套第三层嵌套第三层嵌套第三层嵌套第三层嵌套

1.6 代码

1.6.1 行内代码

• 用 ` 包裹行内代码

1.6.2 代码区块

用3个 ` 包裹代码，后面可以跟随代码块所使用的语言

段落和代码区块之间可以有空行

1
2
3
4
5
6
7

/*css*/
h1  {
font-size: 24px;
text-align: left;
background-repeat: no-repeat;
background-position:center left;
}

1
2
3
4
5
6
7
8

// java
// FileName: HelloWorld.java
public class HelloWorld {
  // Java 入口程序，程序从此入口
  public static void main(String[] args) {
    System.out.println("Hello,World!"); // 向控制台打印一条语句
  }
}

1
2
3

# diff
+ 新增项
- 删除项

支持以下语言种类：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

bash
clojure，cpp，cs，css
dart，dockerfile, diff
erlang
go，gradle，groovy
haskell
java，javascript，json，julia
kotlin
lisp，lua
makefile，markdown，matlab
objectivec
perl，php，python
r，ruby，rust
scala，shell，sql，swift
tex，typescript
verilog，vhdl
xml
yaml

1.7 普通链接

1
2
3
4
5
6
7

<链接地址>
[链接名称](链接地址)
[链接名称](链接地址 "可选标题")

<https://markdown-here.com>
[Markdown Here](https://markdown-here.com)
[Markdown Here](https://markdown-here.com "Markdown Here 标题")

https://markdown-here.com

Markdown Here

Markdown Here

1.8 锚点链接（在文档的结尾为变量赋值）

1
2
3
4
5

[链接名称][网址变量]
[网址变量]:链接地址

[Markdown Here][markdown_here_url]
[Markdown_Here_url]:https://markdown-here.com

[Markdown Here][markdown_here_url]

[点击这里跳转到“1.4 表格”]({{ < relref “#1.4表格” > }})

1.9 图片链接

1.9.1 一般图片链接

1
2
3
4
5

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 '可选标题')

![梦幻之心星](https://img.skyseeker.eu.org/icon/dream-seeker.jpg)
![梦幻之心星](https://img.skyseeker.eu.org/icon/dream-seeker.jpg '梦幻之心星标题'))

点击打开显示效果🎁

1.9.2设置图片大小

两种方法，第一种用html语法，第二种用markdown-it-imsize插件

• Hugo 自带 shortcodes

1

{{<  figure src="pic.png" width="20%" title="图1"  >}}

1

<img src="https://img.skyseeker.eu.org/icon/dream-seeker.jpg" width="20%">

• html方式

2. markdown-it-imsize插件

语法：（注意：=100x200 前面有一个空格）

1

![指定高宽](https://img.skyseeker.eu.org/icon/dream-seeker.jpg =50x50)

横屏滑动幻灯片（未验证）

通过<![](url),![](url)>这种语法设置横屏滑动滑动片，具体用法如下：

1

<![蓝1](https://markdown.com.cn/images/blue.jpg),![绿2](https://markdown.com.cn/images/green.jpg),![红3](https://markdown.com.cn/images/red.jpg)>

点击打开显示效果

< , , >

二、Hugo 高级技巧

2.1 折叠展开

• 创建 detail.html 文件，拷贝其中内容：

1
2
3
4

<details>
    <summary>{{ (.Get 0) | markdownify }}</summary>
    {{ .Inner | markdownify }}
</details>

• 使用：

1
2
3

{{< detail "点我打开" >}}
隐藏的文字
{{< /detail >}}

• 样式
  点我打开

  隐藏的文字

2.2 重点标记

• 创建 mark.html 文件，其中内容编写：

1

<mark>{{ .Get "text" }}</mark>

• 这样一个简单的短代码便实现啦，但默认的高亮为荧光黄色，看起来有点刺眼，那么可以在~~./assets/scss/custom.css ~~中增加 mark 标记的样式🤭。

注意：./assets/scss/custom.css 为我使用主题的自定义 css 文件，其他主题可能不相同。

1
2
3

mark{
    background: hsla(332, 81%, 58%, 0.879);
}

• 使用：

1

{{< mark text="这是一个重点标记" >}}

• 样式

2.3 块引用

{{/< blockquote author=“电影” link=“https://irithys.com” title="《寻梦环游记》" >/}} 死亡不是一切的 终点，遗忘才是 {{/< /blockquote >/}}

支持的 HTML 元素

[markup.goldmark.renderer] ** unsafe = true # 默认值不支持在 markdown 中写 html，需改成 true 开启**

• 不在 Markdown 涵盖范围内的标签，都能直接使用。目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等。

1
2
3

  1. 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
  2. 特殊符号 &copy; &trade; &amp; 18&ordm;C
  3. <span style="color: red;">这是一行红色的文字</span>

1. 使用 Ctrl+Alt+Del 重启电脑
2. 特殊符号 © ™ & 18ºC
3. 这是一行红色的文字

转义

• Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠\转义特殊字符。