hexo 更换 markdown渲染器 @upupming/hexo-renderer-markdown-it-plus

先说一下我试用的几个渲染器

• hexo-renderer-marked：hexo默认的渲染器不支持复杂的数学公式
• hexo-renderer-kramed：支持复杂的数学公式，mathjax的渲染方式
• hexo-renderer-markdown-it：取代第一个的渲染器，渲染更快，更符合CommonMark规则。
• hexo-renderer-markdown-it-katex：跟上一个差不多，但是不用设置就支持katex
• hexo-renderer-markdown-it-plus：好用，可以自己决定是否要渲染katex公式。此外能渲染的东西多，但是已经不维护了。
• @upupming/hexo-renderer-markdown-it-plus ：上一个的升级版。好用。支持的功能多。^{1 2}

介绍一下@upupming/hexo-renderer-markdown-it-plus怎么用到hexo里。

2022-06-03更新

现在已经不用这么麻烦了。想要修改渲染器只需要

1. 卸载原来的渲染器
   npm uninstall hexo-renderer-marked --save
2. 下载新渲染器
   npm i @upupming/hexo-renderer-markdown-it-plus --save

---

原文写于2020-04-29

1.更换渲染器

1.1卸载原来的
如果你没换过hexo的渲染器，那你就这样卸载：
npm uni hexo-renderer-marked --save
如果你换过了，那你就想想你用的是什么渲染器，然后卸载
npm uni 你的渲染器 --save

要显示公式的话在主题的config中修改math字段，设置：

• enable: true
• specific: false
• engine: katex

之后重新hexo clean + hexo g + hexo s即可看到公式显示。

1.2下载新的渲染器
npm i @upupming/hexo-renderer-markdown-it-plus --save

2.修改 _config.yml文件

2.1介绍文件
先一下完整代码，把这段代码完整的放到你博客的 _config.yml里边。下边详细解释一下每行代表什么。

# Markdown config
markdown_it_plus:
  render:
    html: true						
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
  anchors:	
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSide: 'left'
    permalinkSymbol: ¶

• render
  • html：
    • true 支持HTML内嵌
  • xhtmlOut：
    • true 解析器markdown为完全符合XHTML的代码。例如：一个换行符将是<br />，否则会转换为<br>
  • breaks：
    • true 每当.md文件的换行符都会解析器都会生成<br>标签。
    • 其实讲真的这个设置true还是false，我页面上没看出区别。
  • linkify：
    • true 返回文本链接作为与段落内联的适当链接。例如，如果你写的一段文本看起来像一个链接，它将被呈现为<a src="http://example.com">http://example.com</a>，否则会解析为文本，比如<span>http://example.com</span>
  • typographer：替换常见的排版元素。
  • quotes：在 typographer为true的时候才好使，用于替换英文单双引号。
    • 如果quotes：'“”‘’' 那么"hello" 'hello' 会变成“hello” ‘hello’
    • 如果quotes：'«»“”'那么"hello" 'hello' 会变成«hello» “hello”
    • 我用着不好使
• plugins
  • 添加插件，这就是我为什么选了这个渲染器，这个默认支持的比较多，不用自己下载。
  • markdown-it-emoji 支持emoji，:cat:→🐱
  • markdown-it-sub 支持H~2~O→H₂O
  • markdown-it-sup 支持X^2^→X²
  • markdown-it-deflist 支持自定义列表
  • markdown-it-abbr支持<abbr> 标签
  • markdown-it-footnote支持引入参考文献。emmm就是上标数字，最后附上文献那种
  • markdown-it-ins支持++Inserted++ →Inserted， ~~Del~~ →Del
  • markdown-it-mark支持==marked== →inserted
  • markdown-it-katex支持katex公式
  • markdown-it-toc-and-anchor支持@[toc]生成目录
• anchors: 这个按照我上边的默认值写就行

    # Minimum level for ID creation. (Ex. h2 to h6)
    level: 2
    # A suffix that is prepended to the number given if the ID is repeated.
    collisionSuffix: ''           
    # If `true`, creates an anchor tag with a permalink besides the heading.
    permalink: false              
    # Class used for the permalink anchor tag.
    permalinkClass: header-anchor
    # Set to 'right' to add permalink after heading
    permalinkSide: 'left'
    # The symbol used to make the permalink
    permalinkSymbol: ¶
    # Transform anchor to (1) lower case; (2) upper case
    case: 0
    # Replace space with a character
    separator: '-'

2.2修改文件
添加插件你可以

  plugins:
    - markdown-it-sub
    - markdown-it-sup
    - ...

也可以

  plugins:
 	- plugin:
 		 name: markdown-it-sub
 		 enable: false	#false就是不开启这个插件
 	- plugin:
 		 name: markdown-it-sup
 		 enable: false	#false就是不开启这个插件
    - ...

2.3增加插件
如果你想用其他的插件，你可以自己下载
npm install markdown-it-... --save

支持katex公式

1. 修改_config.yml的 plugins，正价katex插件

  plugins:
    - markdown-it-katex

2. 给你主题的中引入一个css，一般路径主题/source/css，找到对应的文件，大概率叫main.sty，加上https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css

---

1. npm @upupming/hexo-renderer-markdown-it-plus ↩︎

2. github upupming/hexo-renderer-markdown-it-plus ↩︎