vue 使用 highlight.js 高亮代码块

vue中实现代码高亮,格式化

在 vue 中实现代码块高亮，即<pre><code>标签中用于直接在页面中展示的代码，增加高亮显示的效果，可以使用 highlight.js 来帮助我们实现。

安装 highlight.js 插件

npm install highlight.js -S

main.js 中引入

// 引入 highlight.js 代码高亮工具
import hljs from "highlight.js";
// 使用样式，有多种样式可选
import "highlight.js/styles/github-gist.css";
// 增加自定义命令v-highlight
Vue.directive("highlight", function(el) {
    
    
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach(block => {
    
    
    hljs.highlightBlock(block);
  });
});
// 增加组定义属性，用于在代码中预处理代码格式
Vue.prototype.$hljs = hljs;

在组件中使用，放在pre标签下的code标签里面

<div v-highlight> <!-- 使用指令 -->
    <pre>
        <code class="css"><!-- 声明什么类型的代码 -->
            [CSS]
            {
    
    
                width:'100px'
            }
        </code>
        <code class="javascript">
            [javascript]
            var a = 123;
            var b = document.getElementById('tr')
        </code>
        <code class="html">
            [HTML]
            &lt;div&gt;&lt;/div&gt;<!-- html代码需要转义 -->
        </code>
    </pre>
</div>

在组件中使用，如果代码块没有被包含在<pre>和<code>标签里面

可以使用 vue.$hljs.highlightAuto("内容").value 来格式化代码，然后再将格式化之后的代码渲染到页面上。

<template>
 <div v-html="codeHtml" v-highlight></div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      codeHtml: ""
    }
  },
  monted() {
    
    
    this.format();
  },
  methods: {
    
    
    format() {
    
    
      let code = "function() { console.log(\"Hello world!\"); }";
      const html = this.$hljs.highlightAuto(code).value;
      this.codeHtml = html;
    }
  }
}
</script>

可用样式风格

引入样式在 "highlight.js/styles/" 中，引用时将样式名字大写转小写并将名字之间的空格替换为"-"，再在最后添加 ".css" 后缀

例如：Github Gist → github-gist.css