Hexo 下 Markdown 的配置与学习

?更换 Markdown 渲染插件

?原因

Hexo 内置的默认渲染插件是 hexo-renderer-marked，缺少很多功能，比如 GFM (GitHub Flavored Markdown)、上下标、脚注、emoji 等

?hexo-renderer-markdown-it 插件

hexo-renderer-markdown-it 插件支持大量扩展功能，可以实现 Hexo 博客的 footnote 功能。

hexo-renderer-markdown-it

?安装，配置插件

参考 Wiki 文档

先卸载原有的 hexo-renderer-marked 插件

1

$ npm un hexo-renderer-marked --save

安装 hexo-renderer-markdown-it 插件

1

$ npm i hexo-renderer-markdown-it --save

使用 Advanced configuration，向 站点配置文档 添加

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

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: ‘“”‘’‘
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: ‘v‘
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ?

?Markdown 基本语法

?文章头基本格式

1
2
3
4
5
6
7
8
9

---
title: 如何搭建个人博客网站(二)
date: 2019-04-13 23:46:39
tags:
  - tutorial
  - github
  - hexo
categories: 教程
---

?斜体和粗体

1
2

*斜体*
**粗体**

渲染效果：这是 斜体，这是 粗体

?分级标题

格式一：

1
2
3
4
5
6
7

这是一个一级标题
============================

这是一个二级标题
--------------------------------------------------

### 这是一个三级标题

格式二：

1
2
3
4
5
6

# H1
## H2
### H3
#### H4
##### H5
###### H6

?分割线

在单独的一行使用 *** 或者 --- 表示分割线

?删除线

1

~~应该不经常用~~

渲染效果：应该不经常用

?超链接

• 插入文字超链接

  1	[显示文字](链接地址)

• 插入图片

  < 大专栏  Hexo 下 Markdown 的配置与学习span class="line">1

  

• 插入音频，使用插件 hexo-tag-aplayer

  1	{% aplayer title author url [picture_url, narrow, autoplay, width:xx%, lrc:xxx] %}

  具体使用方法参考：hexo-tag-aplayer 使用文档

• 插入视频，使用 iframe 代码

  1 2	<script src="/js/youtube-autoresizer.js"></script> <iframe width="800" height="450" src="视频链接" frameborder="0" allowfullscreen></iframe>

?转义符

后面的文字解析为纯文本格式，用来显示特殊符号。

例如：
## 不会解析为标题

?引用

使用 > 来显示文字引用

渲染效果：

?脚注

使用 [^1] [^1]: 的脚注对来表示（1 只是标识，用其他字符也行，但要相对应）

1
2

Here is a footnote reference.[^note]
[^note]: Here is the footnote.

Here is a footnote reference.^[1]

?列表与表格

?无序列表

使用 * + - 表示无序列表

1
2
3
4
5
6

+ 无序列表项 一
	- 子无序列表 一
	- 子无序列表 二
		* 子无序列表 三
+ 无序列表项 二
+ 无序列表项 三

渲染效果：

• 无序列表项 一
  • 子无序列表项 一
  • 子无序列表项 二
    • 子子无序列表项 一
• 无序列表项 二
• 无序列表项 三

?有序列表

使用 数字 和 . 表示有序列表

1
2
3
4
5

1. 有序列表项 一
	1. 子有序列表项 一
	2. 子有序列表项 二
2. 有序列表项 二
3. 有序列表项 三

渲染效果：

1. 有序列表项 一
2. 子有序列表项 一
3. 子有序列表项 二
4. 有序列表项 二
5. 有序列表项 三

?表格

绘制表格格式如下，| 控制分列，- 控制分行，: 控制对齐方式

1
2
3
4
5

| SID | Name | grade |
| :-- | ---: | :---: |
| 001 | Bob  |  65   |
| 002 | Andy |  80   |
| 003 | John |  77   |

渲染效果:

?代码块

?行内代码块

使用 `codes` 表示行内代码块

?多行代码块

将代码块置于两个 ``` 中间（可在第一个 ``` 后面指定代码所属的编程语言）

支持多种编程语言的语法高亮的显示，行号显示

非代码示例：

1

This is a code block.

c++ 示例：

1
2
3
4
5
6
7

using namespace std;
int ()
{
  cout << "Hello World!" << endl;
  return 0;
}

以上是关于Hexo 下 Markdown 的配置与学习的主要内容，如果未能解决你的问题，请参考以下文章

Hexo+NexT：Hexo站点配置详解

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

Hexo+NexT：Next主题配置详解

Hexo选择更高级的Markdown渲染器

配置HEXO

配置HEXO