vue3引入highlight.js进行代码高亮

描述：最近公司封装对外的sdk，想顺便吧使用方法也写在html中，但是苦于没有好的视觉表现，不得已找寻类似的插件；目前记录下一个靠谱的方案；

安装依赖

// 我用的是cnpm, "^2.1.0",
cnpm install --save highlight.js
cnpm install --save @highlightjs/vue-plugin

package.json中的版本

"highlight.js": "^11.6.0",
"@highlightjs/vue-plugin": "^2.1.0",
"vue": "^3.1.2",
"vue-router": "^4.1.4",
"vuex": "^4.0.2",

在main.js中引入并注册

/*黑色主题*/
import 'highlight.js/styles/atom-one-dark.css';
/*白色主题*/
import 'highlight.js/styles/stackoverflow-light.css';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import hljsVuePlugin from "@highlightjs/vue-plugin";
hljs.registerLanguage('javascript', javascript);

省略......
const app = createApp(App)
app.use(hljsVuePlugin)
省略......

页面中使用:

<highlightjs language='javascript' code="const s = new Date().toString()" />

最终页面展示效果