Question

如何使用一个或多个网络工作者突出显示我网站上的多个小型源代码块？

Answer 1

使用一个网络工作者的示例

要仅使用一个webworker突出显示多个代码块，您可以使用以下代码，其中highlight_code_worker_function是工作函数。

<script>

    function highlight_code() {
        if (typeof (Worker) === undefined) return false;
        var workerFunction = new Blob(['(' + highlight_code_worker_function.toString() + ')()'], {type: "text/javascript"});
        var worker = new Worker(URL.createObjectURL(workerFunction));
        var codeBlocks = $('div.readme pre, div.readme code');
        worker.onmessage = function(event) {
            var data = JSON.parse(event.data);
            codeBlocks.eq(data.index).html(data.result).addClass('hljs');
        };
        worker.onerror = function() {
            // do nothing
        };
        codeBlocks.each(function(index) {
            worker.postMessage(JSON.stringify({index: index, code: $(this).text()}));
        });
        worker.postMessage(JSON.stringify({index: -1}));
    }

    function highlight_code_worker_function() {
        onmessage = function(event) {
            var data = JSON.parse(event.data);
            if (data.index === -1) {
                close(); // close worker
            }
            importScripts(''https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js'');
            self.hljs.configure({tabReplace:4});
            var result = self.hljs.highlightAuto(data.code);
            postMessage(JSON.stringify({result: result.value, index: data.index}));
        }
    }

    highlight_code();

    </script>

使用多个网络工作者的示例

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/monokai_sublime.min.css">

    <script type="text/javascript">

      function highlight_code()
      {
        if (typeof (Worker) === undefined) return false;
        var workerFunction = new Blob(['(' + highlight_code_worker_function.toString() + ')()'], {type: "text/javascript"});
        var localWorkerURL = URL.createObjectURL(workerFunction);
        $('div.readme pre, div.readme code').each(function() {
          var code = $(this);
          var worker = new Worker(localWorkerURL);
          worker.onmessage = function(event) { code.html(event.data).addClass('hljs'); }
          worker.postMessage(code.text()); // start worker
        });
      }

      function highlight_code_worker_function()
      {
        onmessage = function(event) {
          importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js');
          self.hljs.configure({tabReplace:4});
          var result = self.hljs.highlightAuto(event.data);
          postMessage(result.value);
          close(); // close worker
        }
      }

      $(window).on('load', highlight_code);

    </script>

Answer 2

受official documentation的启发，我找到了一个可靠的解决方案。（我想）。

事实上，我创建了3个脚本：

worker_functions.js
worker.js
HTML脚本

仅因为我需要动态突出显示代码。这是我的过程：

使用所需的脚本加载页面，等待DOM加载后再运行脚本。
从数据库中获取一些数据，将XML内容插入带有data-my_attribute图标的按钮内的eye中。
单击这些按钮将定位到模式打开（引导程序4）。
在模式显示中（表示之前显示为显示），从按钮获取xml数据并将其放入我的代码块中。 / li>
在显示的模式上（表示在显示时），通过向工作人员发送消息来触发突出显示。

编辑：步骤5是不必要的，因为在开始突出显示过程之前正确完成了jQuery(this).find('#codeblock').html(xml);。

worker_functions.js

let highlight_worker;

/**
 * Start the worker in order to highlighting code block when triggering
 * @param worker_url - The javascript path of the worker
 */
function start_worker(worker_url) {
    highlight_worker = new Worker(worker_url);
}

/**
 * Start an highlighting process through the worker previously started
 * @param querySelector - The DOM element on which the highlighted content should be returned
 */
function start_highlighting(querySelector) {
    // Callback to insert the highlighted content to the expected element in DOM
    highlight_worker.onmessage = (event) => {
        querySelector.innerHTML = event.data;
    }
    
    // Post the content to be highlighted by the worker
    highlight_worker.postMessage(querySelector.textContent);
}

Worker.js

我只包含我要突出显示的语言，所以使用了custom package高亮显示。

/**
 * When worker receives a message, import highlight.js then post back the resulting highlight
 * @param event - The content to be highlighted
 */
onmessage = function (event) {
    importScripts('highlight.pack.js');
    var result = self.hljs.highlightAuto(event.data);
    postMessage(result.value);
}

HTML中的脚本-Django模板

我导入了worker_functions脚本，然后添加了一个事件侦听器，该事件侦听器触发了窗口加载，启动工作程序并触发了模式事件的突出显示。

{% block scripts %}
    <script src="{% static 'device/js/highlight/worker_functions.js' %}"></script>
    <script type="text/javascript">
        window.addEventListener("load", function (event) {
            start_worker("{% static 'device/js/highlight/worker.js' %}");
            $('#mifContentModal').on('show.bs.modal', function (e) {
                // let xml = '<p class="text-break">' + e.relatedTarget.dataset.mif_content + '</p>'; // Before decompress
                let xml = '<xmp>' + e.relatedTarget.dataset.mif_content + '</xmp>';
                console.log(jQuery(this).find('#codeblock'));
                jQuery(this).find('#codeblock').html(xml);
                start_highlighting(codeblock); // It can be done right after adding the code in DOM
            })
            //$('#mifContentModal').on('shown.bs.modal', function (e) {
            //    let codeblock = document.getElementById("codeblock");
            //    start_highlighting(codeblock);
            //    // Then remove the xmp tag
            //    codeblock.innerHTML = jQuery(this).find('xmp').html();
            //})
        });
    </script>
{% endblock %}

然后，我可以使用单个工作人员突出显示任何时候。

如何使用highlightjs使用webworkers突出显示源代码块？

2 个答案:

worker_functions.js

Worker.js

HTML中的脚本-Django模板