Hexo 下 Markdown 的配置与学习

发表于 | 更新于 | 分类于
本文字数： 2.9k | 阅读时长 ≈ 3 分钟

本篇

  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
    [显示文字](链接地址)

  • 插入图片

    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   |

渲染效果:

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
#include <iostream>
using namespace std;
int main()
{
  cout << "Hello World!" << endl;
  return 0;
}

  1. Here is the footnote. ↩

0%