Vue3 代碼塊高亮顯示并可使用富文本編輯器編輯（highlight.js + wangEditor）

在Vue專案中實作以下功能：

??功能1. 在頁面中顯示代碼，并將其中的關鍵字高亮顯示，

??功能2. 允許對代碼塊進行編輯，編輯時代碼關鍵字也高亮顯示，

??功能3. 可在編輯器中添加多個代碼塊，動態渲染代碼關鍵字高亮，

Step1: 安裝所需插件(本文使用npm安裝，若需使用其他方式請查閱官方檔案)

安裝代碼高亮顯示插件highlight.js，官方網站：http://highlight.cndoc.wiki

npm install highlight.js

安裝highlight.js與vue的集成插件highlightjs/vue-plugin，官方檔案：https://github.com/highlightjs/vue-plugin

注意：本文撰寫時，以下命令會自動安裝2.1.0版本，為vue2對應版本，使用vue3需手動將package.json中版本改為2.1.2版本，

npm install @highlightjs/vue-plugin

安裝富文本編輯器插件wangEditor，以及對應的vue集成插件，官方網站：https://www.wangeditor.com/

npm install @wangeditor/editor
npm install @wangeditor/editor-for-vue@next

Step2：使用highlight.js實作功能1 -- 在頁面中顯示代碼，并將其中的關鍵字高亮顯示，

<script setup lang="ts">
import { ref } from 'vue';
import 'highlight.js/styles/stackoverflow-light.css'
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";

const code = ref(`let hello = 'Hello World!';
console.log(hello);`)
</script>

<template>
  <hljsVuePlugin.component :code="code" />
</template>

頁面效果

Step3：使用wangEditor實作功能2 -- 允許對代碼塊進行編輯，編輯時代碼關鍵字也高亮顯示，

<script setup lang="ts">
import { onBeforeUnmount, ref, shallowRef } from 'vue';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

const editorRef = shallowRef();
const valueHtml = ref(`<pre id="w-e-element-18" data-slate-node="element"><code id="w-e-element-19" data-slate-node="element"><span id="w-e-text-20" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true" >let</span></span><span data-slate-leaf="true"><span data-slate-string="true"> hello </span></span><span data-slate-leaf="true"><span  data-slate-string="true">=</span></span><span data-slate-leaf="true"><span data-slate-string="true"> </span></span><span data-slate-leaf="true"><span  data-slate-string="true">'Hello World!'</span></span><span data-slate-leaf="true"><span  data-slate-string="true">;</span></span><span data-slate-leaf="true"><span data-slate-string="true">
console</span></span><span data-slate-leaf="true"><span  data-slate-string="true">.</span></span><span data-slate-leaf="true"><span data-slate-string="true" >log</span></span><span data-slate-leaf="true"><span  data-slate-string="true">(</span></span><span data-slate-leaf="true"><span data-slate-string="true">hello</span></span><span data-slate-leaf="true"><span  data-slate-string="true">)</span></span><span data-slate-leaf="true"><span  data-slate-string="true">;</span></span></span></code></pre>`);

const toolbarConfig = {
  excludeKeys: []
}
const editorConfig = { placeholder: '請輸入內容...' }

// 組件銷毀時，也及時銷毀編輯器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor: any) => {
  editorRef.value = https://www.cnblogs.com/Xian-Yang/archive/2023/04/21/editor // 記錄 editor 實體，重要！
}
</script>