浏览器中代码(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();
    });
  }
}