内容纲要
前言
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.
prismjs是一款代码高亮插件,本身及其轻量(相较hightlightjs),同时原生支持行号,这是hightlight所没有的。。。
安装
JS环境:
pnpm i prismjs
TS环境:
pnpm i @types/prismjs
官方推荐使用插件,使得在打包编译时加载最少的语言和插件数量,不过官网推荐的插件是babel-plugin-prismjs
,但是不适合vite使用(虽然vite也支持babel插件),这里使用专为vite编写的插件:vite-plugin-prismjs
安装:
pnpm install vite-plugin-prismjs -D
vite配置
在vite中进行如下配置:
// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';
export default defineConfig({
plugins: [
prismjs({
languages: ['json'],
// languages: 'all',
/* 有个问题,这里需要注意
这个引入的插件只是相关的js,css仍然需要自己进行引入
*/
}),
],
});
使用
引入模块:
import Prism from "prismjs";
在钩子函数mounted中执行:
//这里使用vue演示
onMounted(() => {
Prism.highlightAll(/* 配置 */);
});
template中使用:
<pre>
<code class="language-js line-numbers" >
let msg = "这是一段代码演示"
console.log(msg)
</code>
</pre>
效果如下

更多内容参考prismjs官网:https://prismjs.com/
发表评论