vue使用Prismjs代码高亮必看

1.安装Prismjs

npm install prismjs -S
npm install babel-plugin-prismjs -D

2.配置Prismjs

在项目下找到babel.config.js
在module.exports中的plugins追加以下配置，如果原本没有plugins可以手动添加

 module.exports = {
  plugins: [
    ["prismjs", {
      "languages": ["javascript", "css", "markup"],
      "plugins": ["line-numbers"], //配置显示行号插件
      "theme": "okaidia", //主体名称
      "css": true
    }]
  ]
}

3.使用

在需要使用的地方导入

import Prism from 'prismjs'; 
import 'prismjs/themes/prism.css';//prismjs的样式文件

4.关于使用的注意事项

记住一点核心思路,必须在页面渲染出来之后再去调用：

Prism.highlightAll();

如果时静态页面，直接再vue的钩子函数mounted中调用，但如果是需要发送请求的情况下获取html标签内容使用v-html注入到页面中，则需要注意，再发送请求获取到内容，并且将后端的响应内容赋值到data中的变量的之后，再去调用，因此再then函数中应该这样去操作:

xxxx.then(res=>{
                    
    if(res&&res.code === 200){
           this.xxx= res.data;
          
           this.$nextTick(()=>{
               Prism.highlightAll();
           });
              
           
           return;
       }
       
   });

在获取到后端返回的内容之后，需要在this.$nextTick回调函数中调用 **Prism.highlightAll();**方法

最后展示一下，我这边的最终运行结果

以上部分内容参考这位博主的：https://blog.csdn.net/qq_33625873/article/details/109149091