Vue + Prismjs 实现代码高亮

最新推荐文章于 2025-06-25 16:56:05 发布

山内有樱名为良

最新推荐文章于 2025-06-25 16:56:05 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43574493/article/details/113093503

本文介绍了如何在Vue项目中集成Prismjs进行代码高亮显示。首先，通过npm安装prismjs和babel-plugin-prismjs插件，并在.babelrc文件中配置。接着，在.vue文件中导入prismjs，并在异步请求后调用Prism.highlightAll()以实现新内容的高亮。注意，更换主题需确保与下载的prismjs主题文件名一致。博客还提供了遇到问题时的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
});