使用 Javascript 的语法高亮代码 [关闭]答案

【问题标题】：Syntax highlighting code with Javascript [closed]使用 Javascript 的语法高亮代码 [关闭]
【发布时间】：2010-09-14 17:05:47
【问题描述】：

您可以推荐哪些 Javascript 库用于在 HTML 中突出显示 块的语法？

（请每个答案提出一个建议）。

【问题讨论】：

shjs.sourceforge.net

标签： javascript html syntax syntax-highlighting

【解决方案1】：

StackOverflow 使用 Prettify 库。

【讨论】：

我支持这个。 Google Code 将它用于他们自己的 repo 突出显示（因为他们编写了它）并自动检测语言。
肯定会使用一种“自动”检测语言的语言，只会给客户端的机器/浏览器增加更多的权重......
如果你知道，你可以给 Prettify 提供语言，它会提高性能。由于大量的语言受众，这在 StackOverflow 中没有使用。
刚刚将它添加到我的网站，它很棒而且使用起来非常简单！
@Vincent：它不仅提高了性能；-)

【解决方案2】：

我最近开发了一个叫彩虹。

主要的设计目标是让核心库变得非常小，并且让开发人员非常容易扩展。

见http://rainbowco.de。

【讨论】：

我今天刚刚遇到 Rainbow ——在我看来，它比 Prettify 可以更精细地区分（例如，能够分辨 rdf:type 何时用作元素以及何时用作属性)。
这需要到顶部，克雷格。我尝试了所有其他解决方案，只有 Rainbow 正确处理了 Python 并且具有可读主题样式表。很棒的插件！

【解决方案3】：

SyntaxHighlighter 可用作GitHub project。

【讨论】：

【解决方案4】：

jQuery Syntax Highlighter 是基于 Google's Prettify 的新产品 - 一个非常非常流行的纯 JavaScript 语法高亮器。

它支持code 和pre 块，能够使用language-javascript 之类的类名来表示我们希望它突出显示，以及自动换行。您可以通过正常选择来复制和粘贴代码，而不必像许多其他人一样打开原始视图。它可以通过使用 HTML5 数据属性 data-sh 或通过在初始化时指定选项来进一步定制。定期更新的绝佳稳定选择。

【讨论】：

作者实际上说它是基于 Google 的 Prettify，而不是 SyntaxHighlighter。虽然看起来就像 SyntaxHighlighter 3，但似乎需要更少的工作来设置。感谢您的链接！

【解决方案5】：

Lea Verou 的 Prism 怎么样。

来自她在 2012 年 6 月的blog post 公告：

它很小。内核压缩和 gzip 压缩后只有 1.5KB。

它具有令人难以置信的可扩展性。不仅很容易添加新语言（现在每个语法高亮器都提供），而且扩展现有的。

它通过 Web Workers 支持并行性，从而在某些情况下获得更好的性能。

它不会强制您使用任何特定于 Prism 的标记，甚至不是特定于 Prism 的类名，只有您应该使用的标准标记反正。所以，你可以试试看，如果你不这样做，请删除它喜欢它，不留痕迹。

【讨论】：

这对我来说是所有答案中的最佳选择，因为添加新语言定义很容易。

【解决方案6】：

怎么样：

syntaxhighlighter

highlight.js

JSHighlighter

【讨论】：

一个简单的谷歌搜索也会给我这个列表——但是你更喜欢哪一个，为什么？

【解决方案7】：

如果你使用的是 jQuery，那就是 Chilli：

http://code.google.com/p/jquery-chili-js/

您所要做的就是包含 jquery-chili.js 和 recipes.js，并使用

进行突出显示

$("code").chili();

它应该自己找出语言。

【讨论】：

该页面上的示例链接都指向一个充满广告的过期域，因此很难了解这个荧光笔的外观。

【解决方案8】：

我对 SHJS 非常满意。它支持多种语言，而且看起来非常快速和准确。

这是我在 my blog 上使用它的示例。我正在使用我自己的自定义 CSS 文件来模拟 Coda's 语法突出显示。如果您想使用它，请给我发电子邮件。

【讨论】：

【解决方案9】：

jQuery.Syntax 是一个非常快速和轻量级的语法荧光笔。它具有语法源文件的动态加载，并使用 CSS 或模式线干净地集成。

它是专门为填补空白而开发的——即：一个快速、干净的客户端语法解析器。

【讨论】：

不幸的是，它认为标准 FpML 消息是垃圾邮件 :)
@ehosca，你能解释一下你遇到的问题吗？
当我将 goo.gl/PPcDx 中的 xml 粘贴到 goo.gl/qSqm9 时，它显示内容无效，似乎是垃圾邮件。希望这会有所帮助。
您需要在文本中包含一些换行符，否则它看起来像链接垃圾邮件。我不记得我使用的确切公式，但我认为如果每行有多个 URL，则文本被视为垃圾邮件 - 这是因为大量机器人正在向系统发送垃圾邮件 (syntax-highlighing.com)。

【解决方案10】：

如果您正在浏览器内的编辑器中寻找语法高亮，请尝试CodeMirror。

【讨论】：

【解决方案11】：

我并不是在争论，只是认为值得一提的是，如果您使用的是 CMS 或博客平台，那么出于显而易见的原因，使用后端荧光笔会更好 — 看看 Geshi(http://qbnz.com/highlighter/) 如果你有兴趣。实际上你可以设置你的服务器通过后端技术来解析 HTML 内容——所以根本不需要 JS 荧光笔。（他们添加的唯一功能是[使用 swf] 打印/复制的能力。）

【讨论】：

这对我来说并不明显。为什么使用后端荧光笔更好？
是的，我也真的很想知道什么是“显而易见”的，更喜欢向客户发送更大的回复...
我更喜欢语法高亮仍然存在于未启用 JS 的设备上。此外，如果您有很多代码要突出显示，客户端荧光笔的运行时成本可能会非常高。也就是说，这取决于您的具体用例:)
哪些设备没有开启JS？

【解决方案12】：

SyntaxHighlighter

【讨论】：

【解决方案13】：

This article at the Web Resources Depot 列出了一堆用于高亮代码的选项，其中一些使用了 Javascript。它于 2009 年 5 月 4 日发布。

【讨论】：