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

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

介绍一下@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→H2O
    • markdown-it-sup 支持X^2^→X2
    • 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 ↩︎

  • 9
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ann's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值