9

这里有一个用于语法高亮的功能强大的 JavaScript 代码：

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

但是这段代码只适用于<pre><code></code></pre>块，这是我的问题，我喜欢使用只是因为 Chrome 和 Safari在复制和过去代码时<pre></pre>不包含换行符，但它可以工作。<pre><code></code></pre><pre></pre>

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

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

4

4 回答 4

12

当前版本的 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]);
    }
};
于 2012-06-07T18:04:53.120 回答
8

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

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

于 2012-06-07T17:39:47.793 回答
1

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

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

  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);
于 2013-11-03T21:13:49.113 回答
0

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

cdnjs
==========

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

jsdelivr
==========

    <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.9.0/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/highlight.js/9.9.0/highlight.min.js"></script>

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

    <脚本>
         hljs.initHighlightingOnLoad();
    </脚本>

这将找到并突出显示 <pre><code> 标签内的代码；它会尝试自动检测语言。如果自动检测对您不起作用，您可以在 class 属性中指定语言

    <上一页>
    <code class="html">
        这是标题 1
    </代码>
    </pre>

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

于 2017-01-25T04:56:43.760 回答