Hexo 下 Markdown 的配置与学习

本篇

1. 更换 Hexo 下的 Markdown 渲染插件
2. 学习 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, 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 |

渲染效果:

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; }

---

1. Here is the footnote. ↩