更换Hexo渲染引擎

更换渲染引擎

hexo-renderer-markdown-it渲染引擎，自带很多插件，社区也比较活跃。可以将自带的渲染引擎替换成。

1. 首先卸载原有的渲染引擎

   npm un hexo-renderer-marked --save
   npm un hexo-renderer-pandoc --save

   默认渲染引擎：hexo-renderer-marked

2. 安装新引擎 npm i hexo-renderer-markdown-it --save

3. 在_config文件中增加配置，启用新引擎的特性，具体配置如下：

   markdown:
       preset: "default"
       render:
           html: true
           xhtmlOut: false
           langPrefix: "language-"
           breaks: true
           linkify: true
           typographer: true
           quotes: "“”‘’"
       enable_rules:
       disable_rules:
       plugins: 
           - markdown-it-abbr
           - markdown-it-attrs
           - markdown-it-cjk-breaks
           - markdown-it-deflist
           - markdown-it-emoji
           - markdown-it-footnote
           - markdown-it-ins
           - markdown-it-mark
           - markdown-it-sub
           - markdown-it-sup
           - name: markdown-it-container
           options: success
           - name: markdown-it-container
           options: tips
           - name: markdown-it-container
           options: warning
           - name: markdown-it-container
           options: danger
   
       anchors:
           level: 2
           collisionSuffix: ""
           permalink: false
           permalinkClass: "header-anchor"
           permalinkSide: "left"
           permalinkSymbol: "¶"
           case: 0
           separator: "-"

测试新渲染引擎

1. markdown-it-container插件，支持容器显示内容

   测试
   测试markdown-it-container生效

2. 支持上述内容显示，还需要在主题的css文件中增加样式，参考样式如下：

   // custom css for markdown-it-container
   .tips {
       padding-left: 10px;
       background-color rgba(52,152,219,.3);
       border-left 6px solid rgb(52,152,219);
       color: darken(rgb(52,152,219),20%);
   }
   .success {
       padding-left: 10px;
       background-color rgba(46,204,113,.3);
       border-left 6px solid rgb(46,204,113);
       color: darken(rgb(46,204,113),20%);
   }
   .warning {
       padding-left: 10px;
       background-color rgba(241,196,15,.3);
       border-left 6px solid rgb(241,196,15);
       color: darken(rgb(241,196,15),20%);
   }
   .danger {
       padding-left: 10px;
       background-color rgba(231,76,60,.3);
       border-left 6px solid rgb(231,76,60);
       color: darken(rgb(231,76,60),20%);
   }

参考资料

• markdown-it引擎社区
  https://github.com/hexojs/hexo-renderer-markdown-it

• markdown-it插件：
  https://www.npmjs.com/search?q=keywords:markdown-it-plugin