Vue+prismjs实现面客端代码高亮

1、安装prismjs插件

npm install prismjs --save

2、安装babel-plugin-prismjs

npm install babel-plugin-prismjs --save

3、在babel.config.js中进行plugin配置

["prismjs", 
{
   "languages": ["javascript", "css", "markup"],
   "plugins": ["line-numbers"],
   "theme": "tomorrow",
   "css": true
 }]

其中，languages为prismjs 能够实现高亮的语言。theme为高亮的主题。默认主题为default，主题需要与node_modules中的themes进行对应。

4、页面中引入并使用，若需要代码高亮的内容是通过 ajax 或 axios 异步请求的，新请求的内容是无法代码高亮的。需要在异步请求后添加 Prism.highlightAll()。