代码高亮，highlight.js的调用方法及其问题

时间 2019-12-05

标签代码 highlight.js highlight 调用方法及其问题栏目 JavaScript 繁體版

原文原文链接

highlight.js是一个用来高亮代码的插件
下载地址：https://highlightjs.org/downl...
配色参考：https://highlightjs.org/stati...
使用方法：css

<link rel="stylesheet" type="text/css" href="a11y-light.css">
    
<pre><code class="html">&lt;div&gt;你好&lt;/div&gt;
</code></pre>        

    <script src="highlight.pack.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>

结果：
html

能够看到使用highlight.js只须要三步：引入css、引入js、调用initHighlightingOnLoad函数。函数

有时候咱们不想一出来就编译代码块，例如须要鼠标点击按钮而后在编译等。这时候调用initHighlightingOnLoad函数是发现不可以编译。能够本身试一下、onload中也不能编译。
这时候就能够调用initHighlighting函数。测试

<script src="highlight.pack.js"></script>
    <script>
        window.onload = function () {
            hljs.initHighlighting();
        }
    </script>

可是，发现highlight只编译一次，如，想第一一次按钮编译一次，结果只有第一次编译了。spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    <link rel="stylesheet" type="text/css" href="a11y-light.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 50px auto;
            width: 400px;
            border: 1px solid green;
        }
    </style>
</head>
<body>

    <div class='box'>
        <button id="changeBtn">改变</button>

        <div id="preBox"></div>
    </div>


    <script src="highlight.pack.js"></script>
    <script>
        // hljs.initHighlightingOnLoad();
        window.onload = function () {
            var oPreBox = document.getElementById('preBox');
            var oChangeBtn = document.getElementById('changeBtn');

            var idx = 0;

            var aPre = [
                `<pre><code class="html">&lt;div&gt;你好&lt;/div&gt;</code></pre>`,
                `<pre><code class="html">&lt;div&gt;你们好&lt;/div&gt;</code></pre>`
            ]

            changePre();

            oChangeBtn.onclick = function () {
                changePre();
            }

            function changePre () {
                if ( idx >= aPre.length ) {
                    idx = 0;
                }
                oPreBox.innerHTML = aPre[idx];

                hljs.initHighlighting();

                idx++;
            }
        }
        
    </script>
</body>
</html>

解决方法：源码中initHighlighting调用的是v函数，该函数使用v.called记录是否第一次编译，以后将v.called设置为了true，只要将'v.called = !0;'注释掉，就能够了。

在点击按钮，以后就能够每一次都执行编译了。插件