实现代码高亮

常用的富文本编辑器，具有代码块功能，但没有代码高亮，这里引入 highlight.js 实现高亮。

highlight.js 网站: https://highlightjs.org/

引入

方式一，通过 npm 引入：

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

方式二，直接引入 highlight.js 资源文件，适用于未使用 npm 包管理的项目：

• 1、从官网按需下载常用语言
• 2、引入从官网下载的 atom-one-dark.css 和 highlight.pack.js
• 3、处理需要高亮的富文本代码

<link href="/highlight/atom-one-dark.css" rel="stylesheet">
<script src="/highlight/highlight.pack.js"></script>

操作

自动格式化：

hljs.highlightAll()

返回 html 文本：

var html = hljs.highlightAuto('<h1>Hello World!</h1>').value

按特定的语言进行高亮：

var html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'})

小程序中使用

兼容小程序，提取出 pre 的部分，换行处理：

let pre = /<pre>[\s\S]*?<\/pre>/g // "."是不会匹配换行的
let arr = htmlStr.match(pre)
arr.forEach(item => {
  htmlStr = htmlStr.replace(item, item.replace(/\n/g, "<br />"))
})

转换weapp不支持的标签，小程序没有pre、blockquote标签，使用div替代，就可以在小程序中显示：

htmlStr = htmlStr
  .replace(/<pre>/g, '<div class="pre">')
  .replace(/<\/pre>/g, "</div>")
  .replace(/<blockquote>/g, '<div class="blockquote">')
  .replace(/<\/blockquote>/g, "</div>")

小程序中显示，使用rich-text组件：

<rich-text nodes="{{htmlStr}}"></rich-text>

将引入的样式文件，将 pre 和 blockquote 相关的样式拷贝多一份为 .pre 和 .blockquote 的样式。