突出显示 pre 标记中的语法，并突出显示.js

highlight syntax in pre tags with highlight.js

本文关键字：显示 js 语法 pre      更新时间：2023-09-26

这里有一个非常强大的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 中尝试此示例。

这里是一个没有jQuery的版本。

=== 更新 ===

下面是一个没有 <code> 标记的示例。

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

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

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

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

在新的 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);
选择任何一个

预构建版本的 highlight.js 具有 22 种常用语言，由以下 CDN 托管：

中新社==========    JSDELIVR==========

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

<脚本>         hljs.initHighlightingOnLoad（）;

这将查找并突出显示

标签中的代码;它试图自动检测语言。如果自动检测对您不起作用，您可以在 class 属性中指定语言

<前>        这是标题 1        
有关更多信息，请参阅这两个链接。

 https://highlightjs.org/usage/https://highlightjs.org/download/
相关文章：