如何在highlight.js中加载一个URL作为源码高亮源码？

Question

要使用 highlight.js，可以使用以下代码：

<pre><code> CODE HERE </code></pre>

但是如果我想突出显示从 URL 加载的一些外部源文件怎么办？

Answer 1

您将使用 hljs 对象的 highlightBlock 方法。当您加载 highlight.js 脚本时，您将有权访问 hljs 对象。

html

<div id="after-load-code">
    <pre><code class="javascript">
        // your ajax content here
    </code></pre>
</div>

当您发出 ajax 请求并用您需要的任何内容填充 HTML 块时，您可以使用 highlightjs 通过以下代码为您设置样式。

原版 Javascript

block = document.getElementById('after-load-code');
code_blocks = block.querySelectorAll('code');

for( var i = 0; i < code_blocks.length; i++) {
    hljs.highlightBlock(code_blocks[i]);
}

如果您更习惯使用 jQuery，这里有一个 jQuery 示例

jQuery 例子

$('#after-load-code pre code').each(function(i, block) {
    hljs.highlightBlock(block);
})

如何在highlight.js中加载一个URL作为源码高亮源码？

How to load a URL as the source code for source code highlighting in highlight.js?

web

highlight.js