安装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显示源代码