Vue + Prismjs 实现代码高亮

1.安装prismjs插件

npm install prismjs --save

2.安装babel-plugin-prismjs

npm install babel-plugin-prismjs --save

babel-plugin-prismjs为prismjs的管理插件

3.在根目录下 .babelrc 文件中 plugins 配置

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

配置完成后大致长这样

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
        ["prismjs", {
          "languages": ["javascript", "css", "markup"],
          "plugins": ["line-numbers"],
          "theme": "tomorrow",
          "css": true
        }]
    ]
}

在配置中，languages 为 prismjs 能够实现高亮的语言。theme为高亮的主题。想要不同主题的可以上prismjs官网查看 https://prismjs.com/

需要注意的是，更换的 theme 名字需要和 npm 下载的 prismjs 文件夹下 theme 主题名一致

4.在vue中使用

在页面导入 prismjs 即可

import Prism from "prismjs";

需要注意的是，若需要代码高亮的内容是通过 ajax 或 axios 异步请求的，新请求的内容是无法代码高亮的。需要在异步请求后添加 Prism.highlightAll()

Vue.axios.get("url")
.then((res) => {
	 _this.content= res.data.content
	 	//Prism.highlightAll()需要写在this.$nextTick()中，
	    this.$nextTick(()=>{
	        Prism.highlightAll()
	    })
}).catch((err) => {
	console.log(err)
});

执行完以上步骤就能实现代码高亮

博客参考https://blog.csdn.net/weixin_34038652/article/details/91416676