Hexo 下 Markdown 的配置与学习
本篇
- 更换 Hexo 下的 Markdown 渲染插件
- 学习 Markdown 基本语法
?更换 Markdown 渲染插件
?原因
Hexo 内置的默认渲染插件是 hexo-renderer-marked
,缺少很多功能,比如 GFM (GitHub Flavored Markdown)、上下标、脚注、emoji 等
?hexo-renderer-markdown-it 插件
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: ? |
?Markdown 基本语法
?文章头基本格式
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. ?