使用prismjs库高亮源代码

安装prismjs插件

npm i prismjs

或者

yarn add prismjs

引用prismjs

在需要使用的文件上

import "prismjs";
// 引用css
import "prismjs/themes/prism-okaidia.css";
//prismjs在window对象下有Prism属性
// 使用any类型骗过ts检测
const Prism = (window as any).Prism;
// 非ts环境
//const Prism = window.Prism;

使用

//code
// Component是引用的组件
//__sourceCode是组件的属性
<pre class="language-html"
          v-html="Prism.highlight(Component.__sourceCode, Prism.languages.html, 'html')" />
//cdoe

注：增加__sourceCode的方法见我的另一篇学习笔记用vue-loader Custom Blocks显示源代码