javascript 使用 highlight.js 突出显示 pre 标签中的语法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10936854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highlight syntax in pre tags with highlight.js
提问by Vahid
there is a light powerful javascript code for syntax highlight here:
这里有一个用于语法高亮的轻量级 javascript 代码：
http://softwaremaniacs.org/soft/highlight/en/
http://softwaremaniacs.org/soft/highlight/en/
but this code just work with <pre><code></code></pre>blocks, which is my problem, i like to use just <pre></pre>because Chrome and Safari don't include line breaks for <pre><code></code></pre>when copy and past the code, but for <pre></pre>it's work.
但是这段代码只适用于<pre><code></code></pre>块，这是我的问题，我喜欢使用只是<pre></pre>因为 Chrome 和 Safari<pre><code></code></pre>在复制和粘贴代码时不包括换行符，但<pre></pre>它的工作原理。
there's a user guide too, but honestly i can't understand what must i do to highlight just pre tags. user guide is here:
还有一个用户指南，但老实说，我不明白我必须做什么才能突出显示 pre 标签。用户指南在这里：
回答by scessor
The current version of chrome has no problems with line breaks in <code>tags.
E.g. try this examplein chrome.
当前版本的 chrome 没有<code>标签换行的问题。例如，在 chrome 中
试试这个例子。
Here a version without jQuery.
=== UPDATE ===
=== 更新 ===
Here an examplewithout the <code>tag.
window.onload = function() {
var aCodes = document.getElementsByTagName('pre');
for (var i=0; i < aCodes.length; i++) {
hljs.highlightBlock(aCodes[i]);
}
};
回答by Ian
I think you just need to change your initialization to:
我认为您只需要将初始化更改为：
$("pre").each(function (i, e) {
hljs.highlightBlock(e);
});
and don't use "pre code"for the jQuery selector. Not sure if that's exactly how the plugin is used, but I would think that's what you need to change...
并且不要"pre code"用于 jQuery 选择器。不确定这是否正是插件的使用方式，但我认为这就是你需要改变的......
EDIT:
编辑：
If you're not using jQuery, you may want to try something like:
如果您不使用 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]);
}
};
It needs to be in window.onloador something similar to make sure the DOM is ready for manipulation.
它需要在window.onload或类似的地方以确保 DOM 已准备好进行操作。
回答by Lorenz Lo Sauer
One special, related circumstance, though which is too long for a comment:
一种特殊的、相关的情况，尽管评论太长了：
Invocation upon the DOM completion event will not suffice on the new blogger.com / blogspot Dynamic View Templatesand probably other similar sites, as in this case the DOM is actually loaded but merely consists out of an injection-ready div elementand the DOM content is injected via a JavaScript method, which itself is called in a set-timeout:
在新的blogger.com/blogspot 动态视图模板和可能的其他类似站点上，对 DOM 完成事件的调用是不够的，因为在这种情况下，DOM 实际已加载，但仅由可注入的 div 元素和 DOM 内容组成通过 JavaScript 方法注入，该方法本身在 set-timeout 中被调用：
setTimeout(function() {
blogger.ui().configure().view();
}, 800);
In order for the syntaxhighlighting to work then, the complex DOM tree must be finished. One solution is through triggering hljs.initHighlightingOnLoad();or the custom highlightBlockfunction after a generous timeout period.
为了让语法高亮起作用，复杂的 DOM 树必须完成。一种解决方案是通过在大量超时时间后触发hljs.initHighlightingOnLoad();或自定义highlightBlock函数。
setTimeout(function() {
blogger.ui().configure().view();
setTimeout(function() {$('pre code').each(function(i, e) {hljs.highlightBlock(e)});}, 2000);
}, 800);
回答by Kishan Donga
select Any one prebuilt version of highlight.js with 22 commonly used languages is hosted by following CDNs:
选择任何一个具有 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>
The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:
在网页上使用 highlight.js 的最低要求是链接到库以及其中一种样式并调用 initHighlightingOnLoad：
<script>
hljs.initHighlightingOnLoad();
</script>
This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn't work for you, you can specify the language in the class attribute
这将查找并突出显示 <pre><code> 标签内的代码；它会尝试自动检测语言。如果自动检测对您不起作用，您可以在类属性中指定语言
<pre>
<code class="html">
This is heading 1
</code>
</pre>
for more information refer this two links.
https://highlightjs.org/usage/
https://highlightjs.org/download/
有关更多信息，请参阅这两个链接。
https://highlightjs.org/usage/
https://highlightjs.org/download/
