highlight.js
是用来高亮显示代码的工具。
配合它还有一个显示行号的插件highlightjs-line-numbers.js
在传统网页中,使用方法:
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
在 vue cli 开发中无法使用成功,这是我的语法,哪位大哥指导下:
<script>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import 'highlightjs-line-numbers.js/src/highlightjs-line-numbers.js'
//Markdown 编辑器之行号与加色显示
/*
// lineNumbersBlock 不会引用,无法产生行号
文档:
https://rkroom.com/post/nuxt-vue-layout-style
https://github.com/wcoder/highlightjs-line-numbers.js/
*/
const highlightCode = () => {
const preEl = document.querySelectorAll('pre')
preEl.forEach((el) => {
hljs.highlightBlock(el);
});
}
export default {
name: 'myContent',
data: function () {
var ref = this;
var id = ref.$route.params.id;
var model = {conMod: {createTime:""}, node: {}};
this.jsp("content_get",{"id":id}).then((ret)=>{
model.conMod=JSON.parse(ret.result)[0];
this.jsp("model_get",{"id":model.conMod.modelId}).then((ret)=>{model.node=JSON.parse(ret.result);})
})
return model;
},
methods: {
navToList: function () { this.$route.push("/list/" + this.conMod.ModelID); }
},
mounted() {
highlightCode()
lineNumbersBlock()
},
updated () {
highlightCode()
lineNumbersBlock()
}
}
</script>