在vue3+vite项目中使用代码高亮插件Prism

Prism官网https://prismjs.com/

安装

//安装prismjs 插件
npm install prismjs -S

//安装prismjs的编译器插件
npm install babel-plugin-prismjs -D
npm install vite-plugin-prismjs -D

配置vite.config.ts

import { prismjsPlugin } from 'vite-plugin-prismjs';
export default defineConfig({
	plugins: [
    	vue(),
    	prismjsPlugin({
      		languages: 'all',
      		plugins: ['line-numbers', 'copy-to-clipboard'], //官网有其他功能,这里开启行数和复制按钮功能
      		theme: 'okaidia',
      		css: true,
    	}),
  ],
})

组件页面中调用：

import Prism from "prismjs"; 
import "prismjs/themes/prism-tomorrow.min.css"; //高亮主题，可以选择性加载

// 接口数据请求回来之后设置
 nextTick(() => {
    Prism.highlightAll();
 });

  //或者
  onMounted(() => {
   Prism.highlightAll();
  });

代码示例：

<pre>
  <code class="language-js line-numbers">
      watch(
        () => menuStore.menu,
          async (newMenu) => {
         if (newMenu.length > 0) {
          await fetchData();
          }
          },
         { immediate: true }
       );
   </code>
</pre>

特别需要注意这里的文本内容是又接口返回的情况，如果富文本编辑器不会给代码加上 <code></code>标签包裹，则Prism不会生效

可以在编辑录入的时候，提交富文本之前对数据做处理，给所有的<pre>标签内置一个<code>

// 富文本处理方法
processRichText(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, "text/html");
  const preTags = doc.querySelectorAll("pre");

  preTags.forEach((pre) => {
     // 检查pre标签下是否已经有code标签
     if (!pre.querySelector("code")) {
       const code = document.createElement("code");
       code.className = "language-js line-numbers";
       code.innerHTML = pre.innerHTML;
       pre.innerHTML = "";
       pre.appendChild(code);
      }
  });
  return doc.body.innerHTML;
}

this.data = this.processRichText(this.richText)