代碼高亮，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;'註釋掉，就能夠了。

在點擊按鈕，以後就能夠每一次都執行編譯了。插件