在vite中使用prismjs

前言

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/