gakki的二向箔 2019-12-09
本篇
Hexo 内置的默认渲染插件是 hexo-renderer-marked
,缺少很多功能,比如 GFM (GitHub Flavored Markdown)、上下标、脚注、emoji 等
hexo-renderer-markdown-it
插件支持大量扩展功能,可以实现 Hexo 博客的 footnote 功能。
参考 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
,向 站点配置文档
添加
12345678910111213141516171819202122 | # Markdown-it config## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wikimarkdown: 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: ? |
123456789 | ---title: 如何搭建个人博客网站(二)date: 2019-04-13 23:46:39tags: - tutorial - github - hexocategories: 教程--- |
12 | *斜体***粗体** |
渲染效果:这是 斜体,这是 粗体
格式一:
1234567 | 这是一个一级标题============================这是一个二级标题--------------------------------------------------### 这是一个三级标题 |
格式二:
123456 | # 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
代码
12 | <script src="/js/youtube-autoresizer.js"></script><iframe width="800" height="450" src="视频链接" frameborder="0" allowfullscreen></iframe> |
后面的文字解析为纯文本格式,用来显示特殊符号。
例如:
## 不会解析为标题
使用 >
来显示文字引用
渲染效果:
使用 [^1]
[^1]:
的脚注对来表示(1
只是标识,用其他字符也行,但要相对应)
12 | Here is a footnote reference.[^note][^note]: Here is the footnote. |
Here is a footnote reference.[1]
使用 *
+
-
表示无序列表
123456 | + 无序列表项 一 - 子无序列表 一 - 子无序列表 二 * 子无序列表 三+ 无序列表项 二+ 无序列表项 三 |
渲染效果:
使用 数字 和 .
表示有序列表
12345 | 1. 有序列表项 一 1. 子有序列表项 一 2. 子有序列表项 二2. 有序列表项 二3. 有序列表项 三 |
渲染效果:
绘制表格格式如下,|
控制分列,-
控制分行,:
控制对齐方式
12345 | | 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++ 示例:
1234567 | using namespace std;int (){ cout << "Hello World!" << endl; return 0;} |
Here is the footnote. ?