浏览器中代码(html+js)高亮,并显示行数 (Vue框架)
最终效果
选型
highlight.js + highlightjs-line-numbers.js
实现
高亮代码
<code v-html="code"></code>
import hljs from 'highlight.js/lib/core'; // 引入hljs
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml')); // 注册xml语言
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript')); // 注册js语言
import 'highlight.js/styles/atom-one-dark.css'; // 引入合适的样式
export default {
data(){
code: '' // 最终要展示的高亮的code
},
created() {
// rawcode为要展示的code,如'<h1>hello world</h1>'
this.code = hljs.highlight(rawcode, { language: 'html' }).value; // 进行代码高亮
}
}
显示行数
export default {
...
mounted() {
hljs.highlightAll();
import('highlightjs-line-numbers.js').then(() => {
hljs.initLineNumbersOnLoad();
});
}
}
本文来自博客园,作者:每天不emo,转载请注明原文链接:https://www.cnblogs.com/duanlvxin/p/17253660.html