2

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

<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>

结果:
图片描述

可以看到使用highlight.js只需要三步:引入css、引入js、调用initHighlightingOnLoad函数。

有时候我们不想一出来就编译代码块,例如需要鼠标点击按钮然后在编译等。这时候调用initHighlightingOnLoad函数是发现不能够编译。可以自己试一下、onload中也不能编译。
这时候就可以调用initHighlighting函数。

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

但是,发现highlight只编译一次,如,想第一一次按钮编译一次,结果只有第一次编译了。

<!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;'注释掉,就可以了。
图片描述
在点击按钮,之后就可以每一次都执行编译了。


听风语
73 声望0 粉丝