前端页面展示代码高亮

安装heightlight.js

npm i heightlight.js --save

main.js中引入

import hljs from 'highlight.js';
//css样式可以去官网选择
import 'highlight.js/styles/atelier-cave-light.css';
Vue.directive('highlight', function(el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach(block => {
    hljs.highlightBlock(block);
  });
});

组件中使用,使用v-heightlight属性+ pre标签+code标签

<template>
  <div>
    <!-- 代码高亮 -->
    <div class="content" v-highlight>
      <pre>
        <code class="js">
          <!-- 去掉缩进 -->
           {{ '\r\n'+rowList.notetxt}}
        </code>
      </pre>
    </div>
  </div>
</template>