vue+prismjs 网页代码高亮插件

最近在使用wangEditor的过程中发现编辑器中代码块展示没有问题，但是预览编辑器中的内容样式丢失，看过wangEditor的文档后发现用到了Prism.js，现将使用的经验分享。

使用步骤

1、安装prismjs插件

// 1. 安装prismjs 插件
npm install prismjs -S// 2. 安装prismjs 编译器插件
npm install babel-plugin-prismjs -D

 2、插件配置

打开 babel.config.js ，在module.exports中的plugins添加以下配置，如果原本没有plugins可以手动添加

// babel.config.js
["prismjs", {"languages": ["javascript", "css", "markup"],"plugins": ["line-numbers"],"theme": "twilight","css": true}
]

配置后 babel.config.js 的内容

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ["@vue/babel-plugin-jsx", ["prismjs", {"languages": ["javascript", "css", "markup"],"plugins": ["line-numbers"], //配置显示行号插件"theme": "twilight", //主体名称"css": true}]]
}

3、在VUE中使用

// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式

3.1、静态页直接调用

<template><div><pre class="language-javascript"><code class="language-javascript" >const editorRef = shallowRef()const valueHtml = ref('这是代码演示')</code></pre></div>
</template><script>
// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式export default {mounted(){Prism.highlightAll()}
}
</script>

3.2、异步渲染

<div v-html="valueHtml" class="iu-editor-html"></div><script>
// 引入
import Prism from "prismjs"; // 引入插件
import 'prismjs/themes/prism.css'; // 引入样式
export default {methods: {getHtml(){// ... do somethingthis.$nextTick(() => {Prism.highlightAll()})// 不生效使用setTimeout// setTimeout(() => {//   Prism.highlightAll()// }, 100);}}}
</script>

OK，over😋