hexo-renderer-markdown-it 插件 详解

简介

hexo-renderer-markdown-it 是一款用于 Markdown 解析和渲染的插件。

  • 用于替换 Hexo 默认自带的 Markdown 渲染器。
  • 提供了更丰富的 Markdown 解析和渲染。

安装

注意:请确保你在 Hexo 主目录下进行以下操作。

  1. 卸载 Hexo 默认自带的 Markdown 渲染器
npm un hexo-renderer-marked --save
  1. 安装 hexo-renderer-markdown-it 插件
npm i hexo-renderer-markdown-it --save

配置

方便的是,hexo-renderer-markdown-it 的所有配置,均在 Hexo 的主要配置文件 _config.yml 中进行配置。
配置的方式,主要分为:

  • 简单配置(支持三种配置级别,开箱即用)
  • 高级配置(更详细的定制,渲染器、插件、锚)

简单配置

hexo-renderer-markdown-it 提供三种简单配置方式(配置级别)zerodefaultcommonmark
在 Hexo 的 _config.yml 文件中配置以下内容:

# Markdown-it config
#markdown: 'zero'
#markdown: 'default'
markdown: 'commonmark'

每种简单配置有其默认的一些设置。更多个性化配置,请参考:高级配置。

  • zero:禁用大多数解析器功能。仅支持斜体和粗体,甚至不支持所有原始Markdown功能。
  • default(GFM):解析器的行为类似于github规范。
  • commonmark:提供比Zero预设更多的功能。 此设置将强制插件使用最新的CommonMark规范。

警告:选择一种简单配置,将阻止您使用任何附带的插件。


高级配置

hexo-renderer-markdown-it 提供的高级配置,是对简单配置的详细定制。
在 Hexo 的 _config.yml 文件中配置以下内容(官方提供的完整配置,没有特殊需要不用再次修改):

# Markdown-it config
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: ¶

高级配置详解

渲染器(render)

# Markdown-it config
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  • html:定义文档中的HTML内容是否应转义或传递给最终结果。
html: true # 不转义 HTML 内容
html: false # 转义 HTML 内容,使标签作为文本输出
  • xhtmlOut:定义解析器是否将导出完全兼容XHTML的标记。
xhtmlOut: true # 必须使用完全的 XHTML 代码,换行必须为 <br/>
xhtmlOut: false # 不必必使用完全的 XHTML 代码,换行可以为 <br>
  • breaks:使源文件中的换行符被解析为<br>标记。每次按Enter键都会创建换行符。
breaks: true # 每次会车换行相当于一个 <br/> 标签
breaks: false # Pa每次会车换行会被忽略
  • linkify:解析器能够将直接粘贴到文本中的链接内联。
linkify: true # 类似链接的文本,作为链接输出
linkify: false # 类似链接的文本,依然作为文本输出
  • typographer:可以替换常见的排版元素。
typographer: true # 替换常见的排版元素
typographer: false # 不替换常见的排版元素
  • quotes:单引号、双引号如何被替换
quotes: '“”‘’' # 'single'、"double" 变成 ‘single’、“double”
quotes: '«»“”' # 'single'、"double" 变成 “single”、«single»

插件(plugins)

hexo-renderer-markdown-it 默认集成5个 markdown-it 插件

# Markdown-it config
markdown:
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  • markdown-it-abbr:缩写插件
*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

The HTML specification
is maintained by the W3C.
  • markdown-it-footnote:脚注插件
basic footnote[^1]
here is an inline footnote[^2](inline footnote)
and another one[^3]
and another one[^4]

[^1]: basic footnote content
[^3]: paragraph
footnote
content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)
  • markdown-it-ins:插入插件(下划线插件)
++inserted++ => <ins>inserted</ins>
  • markdown-it-sub:下标插件
H~2~0 => H<sub>2</sub>O
  • markdown-it-sup:上标插件
29^th^ => 29<sup>th</sup>

锚(anchors)

可能自己不会用,因此,没太关注这个功能

# Markdown-it config
markdown:
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶
  • level:生成 Heading ID 的标题等级
  • collisionSuffix:Heading ID 重复时,数字的后缀
  • permalink:'true',则创建一个锚标记,除标题外还有一个固定链接
  • permalinkClass:用于固定链接锚标记的样式
  • permalinkSymbol:用于固定链接标记的符号

参考:
markdown-it 插件 GitHub主页
hexo-renderer-markdown-it GitHub Wiki

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容