Highlight.js-高亮代码

Highlight.js

Highlight.js是用JavaScript编写的 语法突出显示工具。 github,

• 它在浏览器和服务器上均可使用。
• 它几乎可以与任何标记一起使用，不依赖任何框架，并且具有自动语言检测功能。

Vue中使用highlight.js格式化高亮代码

1.安装

 npm install highlight.js --save //默认导入将导入所有语言

2.引入

import  hljs  from 'highlight.js';  
// 样式文件
import('highlight.js/styles/atom-one-light.css');

3.定义指令

<script>
export default {
  directives: {
    highlightjs: {  
      inserted (el) {  
        // 遍历元素并且使用 highlight 进行处理 
        const preEl = document.querySelectorAll('pre code');
        preEl.forEach(el => {
        hljs.highlightBlock(el);
        });
      },
      //动态渲染改变的值时需添加componentUpdated钩子函数
      componentUpdated(el, binding) {
        const preEl = document.querySelectorAll('pre code');
        preEl.forEach((el, i) => {
          el.textContent = binding.value
          hljs.highlightBlock(el);
        });
      }
    }  
  }
}
<script>

4.使用

<template></template>
  <pre v-highlightjs="value">
    <code class="mysql" spellcheck="false">{{value}}</code>
  </pre>
<template>

不同的语言只需修改 code 标签的 class 值, 想要使用不同的主题只需引入对应的 css

highlight 支持的语言以及不同样式