highlight + vue3 + contenteditable 实现高亮代码，并且编辑保存

背景

想要做一个实现代码高亮显示，好看一些，然后可以编辑，编辑后还可以保存的功能

实现

安装highlight

安装依赖

## 基础依赖
npm install --save highlight.js
## 支持vue3的依赖
npm install --save @highlightjs/vue-plugin

在main.js引入和注册highlight

// src/main.js 
import { createApp } from 'vue'
import App from './App.vue'
import 'highlight.js/styles/atom-one-dark.css' // 样式 
import 'highlight.js/lib/common' // 依赖包
import hljsVuePlugin from '@highlightjs/vue-plugin' // 支持vue3的组件

const app = createApp(App)
app.use(hljsVuePlugin) // 引入代码高亮，并进行全局注册
app.mount('#app')

使用

// 或者直接将显示的代码写到 `code`中
<highlightjs language='javascript' code="console.log('test');" />

contenteditable

<div class="code-content" contenteditable="true" ref="highlightjs" >
     <highlightjs language='javascript' :code="desc"  />
</div>

保存

 console.log('highlightjs', highlightjs.value.innerText);

样式

这里很重要

.code-content {
    height: 100%;
    overflow-y: scroll;
    padding: 10px;
    background: #282c34;
    // 取消可输入标签聚焦时contenteditable的边框
    outline: none; 
    :deep(code.hljs) {
        padding: 0;
    }
}

one more thing: highlight 另一种引入方式

 import hljs from 'highlight.js/lib/core';
 import xml from 'highlight.js/lib/languages/xml';
 hljs.registerLanguage('xml', xml);
 
 
 // 使用
 let code = ref('')
 // code 就是要显示的代码字符串
  const highlightedCode = hljs.highlight(code,
        { language: 'xml' }
     ).value;
 code.value = highlightedCode

<pre><code class="hljs xml" v-html="code"></code></pre>