我正在参加「掘金启航方案」

前语

五一假日，本想躺平好好享受假日，可是一直想写一个和chatgpt差不多页面，可是完成旅程坎崎岖坷，此文是为了记录一下亲测有效的代码块高亮完成。实践完成效果为下图，接口是经过ws协议实时烘托展现代码块，不是静态烘托，亦可完成动态添加代码仿制功用。

Prism.js+Vue3+vite实现实时代码块渲染

根底运用

先装置Prism.js，能完成代码块高亮的插件有许多这儿选用了Prism.js，它是比较轻量级并且功用强大可以经过plugin进行可选功用扩展。 装置

//装置Prism.js编译器
npm install prismjs -S
//可选项，首要是进行扩展更功用操控和款式主体操控
//若不装置需求在mian.ts中引入想要的主题款式
//同时需求注意的是这是vite版本装置命令
npm install vite-plugin-prismjs -D

vite.config.ts装备

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { prismjsPlugin } from "vite-plugin-prismjs"
export default defineConfig(({ command }) => {
  const prodMock = true
  return {
    plugins: [
      vue(),
      prismjsPlugin({
        languages: 'all',
        plugins: ['line-numbers', 'copy-to-clipboard'], //官网有其他功用,这儿敞开行数和仿制按钮功用
        theme: 'tomorrow',
        css: true,
      }),
    ],
  }
})

运用页面运用
咱们将需求被代码高亮的code片段经过Prism.highlight进行处理，他会输出加上类名的格式化后的jsx标签，在vue中直接用v-html指令进行烘托即可

import Prism from "prismjs";
let copyCodeSting=`function deepCopy(obj) { xxxx}`
let codeString = Prism.highlight(
            copyCodeSting,//需求格式化的片段
            Prism.languages.javascript,//js言语
            "javascript"//输出言语格式
          );
console.log(codeString,'codeString) 
********************
//输出
<span class="token keyword">function</span> <span class="token function">deepCopy</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> xxxx<span class="token punctuation">}</span>

一键仿制完成
由于咱们之前在plugin中设置了一键仿制代码的功用敞开，所以在静态的元素上添加如下关键词，在进行编译时Prism.js会主动帮咱们在方针元素刺进一个仿制按钮，具体运用如下

//仿制之后交互时间设置
data-prismjs-copy-timeout
//仿制按钮默认展现文字
data-prismjs-copy
//仿制按钮失败状况展现文字
data-prismjs-copy-error
//仿制按成功状况展现文字
data-prismjs-copy-success
//实践运用代码
<body data-prismjs-copy-timeout="500">
	<pre><code class="language-c" data-prismjs-copy="Copy the C snippet!"
         data-prismjs-copy-error="Copy the error!"
          data-prismjs-success="Copy the success!"
        >int main() {
	return 0;
}</code></pre>
</body>

进阶运用

众所周知，chatgpt的答复不是一次性答复结束的，是有一个进程，并且答复进程中有多少代码块都是未知的一切都是动态的所以这个静态的代码块烘托操作是不符合需求的。故另辟蹊径，拿到完整的返答复案之后进行正则匹配，将代码块逻辑截取出来然后进行Prism.js格式化，再将格式化的内容回填回去。

let htmlCopy="```function deepCopy(obj) { xxxx}```"
 let htmlArr = htmlCopy.split("```");
   htmlArr.map((item, index) => {
        if (index % 2 != 0) {
          let newTtem = Prism.highlight(
            item,
            Prism.languages.javascript,
            "javascript"
          );
          //此时为了确保代码块的处理
          // 进入队列是为了确保出队时分次序无误展现次序正确
          htmlArrTwo.push(newTtem);
        }
      });
      htmlArr.join(htmlArrTwo.shfit())

上面提到的一键仿制功用同样是适用于静态代码块展现，因为是在编译阶段进行刺进仿制按钮，所以动态获取的实时展现字符串仿制功用按钮无法添加上去。和上面完成思路差不多，在动态获取代码块内容之后进行组合参加仿制按钮即可。

后话

以上便是这个五一假日，个人经过完成Prism.js+Vue3+vite仿照chatgpt完成代码块高亮功用的首要思路，如果大佬有更好用的思路欢迎在谈论区进行讨论一同学习。