vue3+typeScript中使用‘highlight.js’代码高亮组件

• 190种语言和97种样式
• 自动语言检测
• 多语言代码突出显示
• 可用于node.js
• 适用于任何标记
• 与任何js框架兼容

npm install highlight.js --save

main.ts中使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import hljs from 'highlight.js' 
import 'highlight.js/styles/monokai-sublime.css'  
const app = createApp(App)


app.directive('highlight', function (el) {
    const blocks = el.querySelectorAll('pre code');
    blocks.forEach((block: any) => {
        hljs.highlightBlock(block)
    })
})
app.use(store);
app.use(router);
app.mount('#app')

vue文件中使用

    <div v-highlight>
        <pre>
            <code>

            </code>
        </pre>
    </div>

效果展示

这个截图就是highlight.js组件的高亮效果