vue3+highlight js/vue-插件实现页面上片段代码高亮

[本文已参与「新人创作礼」活动，一起开启掘金创作之路。]

highlight.js中文网

highlight.js官网

先看效果

首先安装

npm install --save highlight.js
npm install --save @highlightjs/vue-plugin

在main.ts中引入

import HljsVuePlugin from '@highlightjs/vue-plugin'
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'

在组件中引用

<highlightjs autodetect :code="codeHtml"/>
 
const codeHtml:any = [{name:'111',age:'18'},{name:'111',age:'18'},{name:'111',age:'18'}];
let jsonCode = JSON.stringify(codeHtml,null,4)
return {
    jsonCode
}