使用highlight.js在pre标签中突出显示语法

Question

这里有一个简单强大的 javascript 代码用于语法突出显示：

http://softwaremaniacs.org/soft/highlight/en/

但是这段代码只适用于

<pre><code></code></pre>

块，这是我的问题，我喜欢只使用

<pre></pre>

，因为 Chrome 和 Safari 在复制和粘贴代码时不包含

<pre><code></code></pre>

的换行符，但对于

<pre></pre> 

工作了。

还有一个用户指南，但老实说，我不明白我必须做什么才能突出显示预标记。用户指南在这里：

http://softwaremaniacs.org/soft/highlight/en/description/

Answer 1

当前版本的chrome没有

<code>

标签中的换行问题。
例如。在 Chrome 中尝试这个示例。

这里没有 jQuery 的版本。

这里是一个示例，没有

<code>

标签。

window.onload = function() {
    var aCodes = document.getElementsByTagName('pre');
    for (var i=0; i < aCodes.length; i++) {
        hljs.highlightBlock(aCodes[i]);
    }
};

Answer 2

我认为你只需要将初始化更改为：

$("pre").each(function (i, e) {
    hljs.highlightBlock(e);
});

并且不要使用

"pre code"

作为 jQuery 选择器。不确定这是否正是插件的使用方式，但我认为这就是您需要更改的......

编辑：

如果您不使用 jQuery，您可能想尝试以下操作：

window.onload = function () {
    var allPre, i, j;
    allPre = document.getElementsByTagName("pre");
    for (i = 0, j = allPre.length; i < j; i++) {
        hljs.highlightBlock(allPre[i]);
    }
};

它需要位于

window.onload

或类似的内容中，以确保 DOM 已准备好进行操作。

Answer 3

一个特殊的相关情况，但对于评论来说太长了：

在新的 blogger.com / blogspot 动态视图模板 以及可能其他类似网站上，调用 DOM 完成事件是不够的，因为在这种情况下，DOM 实际上已加载，但仅由一个 注入就绪的 div 元素组成 并且 DOM 内容是通过 JavaScript 方法注入的，该方法本身在设置超时中被调用：

  setTimeout(function() {
    blogger.ui().configure().view();
  }, 800);

为了让语法高亮能够工作，复杂的 DOM 树必须完成。一种解决方案是在一段较长的超时时间后触发

hljs.initHighlightingOnLoad();

或自定义

highlightBlock

函数。

  setTimeout(function() {
    blogger.ui().configure().view();
  setTimeout(function() {$('pre code').each(function(i, e) {hljs.highlightBlock(e)});}, 2000);
  }, 800);

Answer 4

选择具有 22 种常用语言的 highlight.js 的任何一种预构建版本均由以下 CDN 托管：

cdnjs
=========

    
    

jsdelivr
=========

    
    

在网页上使用highlight.js的最低限度是链接到库以及其中一种样式并调用initHighlightingOnLoad：

这将查找并突出显示

 标签内的代码；它尝试自动检测语言。如果自动检测不适合您，您可以在 class 属性中指定语言



    
    
        这是标题 1
    
    



有关更多信息，请参阅这两个链接。

https://highlightjs.org/usage/

https://highlightjs.org/download/