Hexo 下 Markdown 的配置与学习

Posted lijianming180

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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, 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

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

  1. Here is the footnote. ?


































































































































































以上是关于Hexo 下 Markdown 的配置与学习的主要内容,如果未能解决你的问题,请参考以下文章

Hexo+NexT:Hexo站点配置详解

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

Hexo+NexT:Next主题配置详解

Hexo选择更高级的Markdown渲染器

配置HEXO

配置HEXO