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中尝试this example。

此处a version without jQuery。

=== UPDATE ===

Here an example没有<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

一个特殊的，相关的情况，虽然评论时间过长：

对DOM完成事件的调用在新的 blogger.com / blogspot动态视图模板以及可能的其他类似网站上是不够的，因为在这种情况下，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);

Answer 4

选择任何一个包含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：


    <script>
         hljs.initHighlightingOnLoad();
    </script>

这将找到并突出显示＆lt; pre＆gt;＆lt; code＆gt;内的代码。标签;它试图自动检测语言。如果自动检测不起作用，您可以在类属性

中指定语言


    <pre>
    <code class="html">
        This is heading 1
    </code>
    </pre>

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

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

4 个答案: