Vue3造轮子之Typescript配置highlight过程

yarn add highlight.js @types/highlight.js

import Hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css'
// 自定义的interface会导致报错
// interface Highlightjs {
//    [x:string]:any
// }
//let Highlight:Highlightjs = {};
let Highlight:any = {};

Highlight.install = function (Vue:any,options:any) {

    Vue.directive('highlightA',{
        inserted:function(el:any){
            let blocks = el.querySelectorAll('per code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i]
                Hljs.highlightBlock(item)
            }
        }
    })

    Vue.directive('highlightB',{
        componentUpdated:function(el:any){
            let blocks = el.querySelectorAll('per code');
            for (let i = 0; i < blocks.length; i++) {
                const item = blocks[i]
                Hljs.highlightBlock(item)
            }
        }
    })
}

export default Highlight

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import Highlight from './libs/types/highlight' // 路径对应你创建的highlight.ts的路径

const app = createApp(App)
app.use(router)
app.use(Highlight)
app.mount('#app')

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

const app = createApp(App)
app.use(router)

// 注册自定义指令高亮代码
app.directive('highlight', {
  // Directive has a set of lifecycle hooks:
  // called before bound element's parent component is mounted
  beforeMount(el:any) {
    // on first bind, highlight all targets
    let blocks = el.querySelectorAll('pre code');
    for(let i = 0 ;i < blocks.length ; i++){
      let item = blocks[i]
      console.log(item)
      hljs.highlightBlock(item)
    }
  },
  // called after the containing component's VNode and the VNodes of its children // have updated
  updated(el:any, binding:any) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code');
    for (let i = 0; i < targets.length; i += 1) {
        let target = targets[i];
        if (typeof binding.value === 'string') {
        target.textContent = binding.value;
        }
        hljs.highlightBlock(target);
    }
  }
})

app.mount('#app')

<pre v-highlight>
  <code class="javascript">
    let a = "hello world";
    console.log(a)
  </code>
</pre>