描述:最近公司封装对外的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()" />