Prismjs 代码语法高亮在 vue 中的应用

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

转载最新推荐文章于 2025-06-25 16:56:05 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c6826a65188256ec63ef901

文章标签：

#javascript #前端 #ViewUI

本文详细介绍如何在Vue框架中使用PrismJS实现代码语法高亮，包括安装步骤、配置方法及解决异步加载代码高亮问题。

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

Prismjs 是前端界面显示代码语法高亮的npm包

它实现了代码在前端页面显示时就像在编辑器中时一样的样式

要在vue框架中使用这样的装逼神器首先要做的自然是安装他了

npm i --save Prismjs 
npm i --save babel-plugin-prismjs 
复制代码

当然如果你安装使用了淘宝的cnpm自然可以这样安装

cnpm i --save Prismjs 
cnpm i --save babel-plugin-prismjs 
复制代码

然后就是在vue中引入了

打开main.js引入

import Prism from 'prismjs'
Prism.highlightAll()
复制代码

你以为这样就好了？这也太简单了吧!

其实还有 babel-plugin-prismjs

我们需要在项目根目录 .babelrc 中加入配置信息

[
"prismjs",
{
"languages": ["javascript", "css", "markup"], //这是语言类型
"plugins": ["line-numbers"],//使用了行号还可以添加其他插件，具体去官网看看吧
"theme": "twilight",//主题！！
"css": true
}
]
复制代码

其实并不难嘛

在我自己的项目中也使用了这一插件去实现博客代码块的显示。可以去我的博客看看哦!

如果还是有不清楚的可以去github看我的博客源码看看具体的实现哦

对了还有一点，如果你的代码是异步获取的话呢那么这个显示就可能会出现一点小问题。就是代码的语法高亮没有显示出来那该怎么办呢？

那就是在异步获取到数据之后执行

Prism.highlightAll()
复制代码

当然在执行这段代码之前需要 import

import Prism from 'prismjs'复制代码

很详细了吧！

欢迎到我的博客、我的github逛哦！

我的博客：http://blog.luyu.fun

我的github：https://github.com/panyu97py

我的博客源码：https://github.com/panyu97py/blog-client

转载于:https://juejin.im/post/5c6826a65188256ec63ef901