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

Posted 2023-03-06

【中文标题】使用 highlight.js 突出显示 pre 标签中的语法

【英文标题】：highlight syntax in pre tags with highlight.js

【发布时间】：2012-06-11 19:19:23

【问题描述】：

这里有一个功能强大的 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/

【问题讨论】：

当前版本的chrome没有<code>标签中的换行问题。例如。在 chrome 中尝试 this example。

也许你是对的，但我喜欢只使用 javascript 函数，但你的示例使用了 jQuery，有没有办法在 Javascript 中制作它？

【参考方案1】：

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

cdnjs ========== jsdelivr ==========

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

hljs.initHighlightingOnLoad(); 脚本>

这将在

 标签内找到并突出显示代码；它会尝试自动检测语言。如果自动检测不适合你，你可以在 class 属性中指定语言



    
    
        这是标题 1
    代码>
    

有关更多信息，请参阅这两个链接。https://highlightjs.org/usage/https://highlightjs.org/download/

【参考方案2】：

一个特殊的相关情况，虽然太长了，无法评论：

在新的 blogger.com / blogspot 动态视图模板 和可能的其他类似网站上调用 DOM 完成事件是不够的，因为在这种情况下，DOM 实际已加载，但仅包含以下内容准备好注入的 div 元素，并且 DOM 内容通过 JavaScript 方法注入，该方法本身在 set-timeout 中调用：

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

为了使syntaxhighlighting 起作用，必须完成复杂的DOM 树。一种解决方案是在较长的超时时间后触发hljs.initHighlightingOnLoad(); 或自定义highlightBlock 函数。

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

【参考方案3】：

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

$("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 已准备好进行操作。

【讨论】：

谢谢你的回答，但我必须把你的建议放在哪里？我只是使用突出显示 js 文件而不是 jQuery，我认为你的手段在这里 <script type="text/javascript"> hljs.tabReplace = ''; hljs.initHighlightingOnLoad(); </script> 对吗？

您是否阅读了您提供的用户指南？如果您查看自定义初始化部分，它会告诉您确切的操作。调用 hljs.highlightBlock(param) 并传递一个 DOM 元素作为“参数”突出显示各个部分，而不仅仅是查找默认值（pre 标签中的代码标签）。因此，您可以自行获取要突出显示的元素（所有 pre 的）并在它们上调用 highlightBlock

用户指南中的例子不是很清楚，我不明白该怎么做！我是 DOM 的新手！这段代码的使用很简单，但只适用于<pre><code></code></pre>，但我不知道如何让它为 PRE 工作！

您在这个答案中看到我的编辑了吗？我用我认为是非 jQuery 的解决方案对其进行了更新。让我知道这是否有效

【参考方案4】：

当前版本的chrome没有<code>标签中的换行问题。 例如。在 Chrome 中尝试this example。

这里a version without jQuery。

=== 更新 ===

Here an example 没有<code> 标签。

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

【讨论】：

我认为您的代码必须有效，但有两个问题：在 css 样式中，所有类都设置为 pre 标记，第二个问题是我认为 pre 标记比旧浏览器的代码更好，不是吗更改您的代码以使用 pre？ :-)

还是不行 :-( 我在我的索引页中使用了你的代码：<script type="text/javascript"> hljs.tabReplace = ''; hljs.initHighlightingOnLoad(); window.onload = function() var aCodes = document.getElementsByTagName('pre'); for (var i=0; i < aCodes.length; i++) hljs.highlightBlock(aCodes[i]); </script> 但突出显示不起作用。抱歉打扰了。

我的示例在您的浏览器中有效吗？您可以删除hljs.tabReplace = ''; hljs.initHighlightingOnLoad();，它不是必需的。您能向我们展示您的索引页的完整内容吗？

它只是用于浏览器缓存，刷新终于奏效了！非常感谢。