为何选择 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文件中使用

   <!-- 要高亮的代码块用 "v-highlight"  -->
    <div v-highlight>
        <pre>
            <code>
            <!-- 高亮代码块 -->
            </code>
        </pre>
    </div>

效果展示