Vue项目中引进代码高亮插件——vue-highlightjs

1. 在做代码高亮的时候，发现需要引进代码高亮的插件，搜集资料发现以下可实现代码高亮 的插件：vue-highlightjs、DlHighlight、highlight.jsr、syntaxhighlighter、prism.js。
2. 我在使用选择了vue-highlightjs，具体可以参考此篇博客：vue-highlightjs代码高亮显示
3. 实现效果：
   html:

   <pre v-highlight>
     <code class="html">
    &lt;div class="content-top"&gt;
     &lt;div class="contaminantsPM"&gt;
       &lt;p&gt;全省占比最大的首要污染物&lt;/p&gt;
       &lt;span&gt;PM10&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="contaminantsO3"&gt;
       &lt;p&gt;兰州及周边城市污染贡献占比最大&lt;/p&gt;
       &lt;span&gt;O3&lt;/span&gt;
     &lt;/div&gt;
   &lt;/div&gt;
     </code>
   </pre>

浏览器效果：

css:

<pre v-highlight>
   <code class="css">
     .table {
      padding: 0 0.6rem;
      height: calc(100% - 3.8rem);
      /deep/ .ivu-table-border:after {
        display: none;
      }
      /deep/ .ivu-table-wrapper {
        height: 100%;
      }
      /deep/ .ivu-table-wrapper .ivu-table-header thead tr th {
        border: 1px solid rgba(73, 238, 238, 1);
        background: rgba(73, 238, 238, 0.4);
        color: rgba(51, 214, 193, 1);
        border-bottom: none;
      }
      /deep/ .ivu-table:before {
        background-color: rgba(73, 238, 238, 1);
      }
     </code>
 </pre>

实现效果：

js:

    <pre v-highlight>
        <code class="js">
            WORD : function(txt) {
            var m = /^(\$?\w+)/.exec(txt);
            if (m) {
            var style = "operand";
            var tok = this.getLastToken();
            if (tok && tok.content == "function")
                style += " defun";
            var id = m[1];
            if (id in KEYWORDS) {
                style += " keyword";
                if (id == "function") {
                    if (tok) {
                        if (tok.type == "operator" && tok.content == "=" ||
                            tok.type == "hasharrow")
                            tok = this.getLastToken(1);
                        if (tok && tok.type == "operand")
                            tok.style += " defun";
                    }
                }

        </code>
    </pre>

实现效果：