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,向 站点配置文档 添加

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. 有序列表项 三

渲染效果:

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

?表格

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

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

渲染效果:

SIDNamegrade
001Bob65
002Andy80
003John77

?代码块

?行内代码块

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

?多行代码块

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

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

非代码示例:

1
This is a code block.

c++ 示例:

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

  1. Here is the footnote. ?

相关推荐