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

最新推荐文章于 2024-04-30 00:27:59 发布

weixin_33777877

最新推荐文章于 2024-04-30 00:27:59 发布

阅读量1.6k

点赞数

文章标签： c/c++

原文链接：https://segmentfault.com/a/1190000017490379

版权

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

weixin_33777877

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
代码高亮，highlight.js的调用方法及其问题

highlight.js是一个用来高亮代码的插件下载地址：https://highlightjs.org/downl...配色参考：https://highlightjs.org/stati...使用方法：<link rel="stylesheet" type="text/css" href="a11y-light.css"&gt...
复制链接

扫一扫

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

“相关推荐”对你有帮助么？