使用 Javascript 的语法高亮代码

IT技术 javascript html syntax syntax-highlighting
2021-02-06 20:34:02

您可以推荐哪些 Javascript 库来突出显示 HTML 中的 <code> 块？

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

6个回答

StackOverflow 使用Prettify库。

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

我最近开发了一种叫做彩虹。

主要的设计目标是使核心库非常小，并使开发人员能够轻松扩展。

见http://rainbowco.de。

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

jQuery Syntax Highlighter是一款基于Google 的 Prettify 的新产品- 一种非常流行的纯 JavaScript 语法荧光笔。

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

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

Lea Verou 的Prism怎么样？

来自她在 6 月（2012 年）的博客文章公告：

  • 它很小。核心只有 1.5KB 压缩和 gzip。
  • 它具有令人难以置信的可扩展性。不仅可以轻松添加新语言（如今每个语法高亮器都给定了这一点），而且还可以扩展现有语言。
  • 它通过 Web Workers 支持并行性，以在某些情况下获得更好的性能。
  • 它不会强迫您使用任何特定于 Prism 的标记，甚至不会强制您使用特定于 Prism 的类名，而只是您应该使用的标准标记。因此，您可以尝试一下，如果您不喜欢它，请将其删除并且不留下任何痕迹。
由于添加新语言定义很容易，这最终成为我所有答案中的最佳选择。
2021-03-21 20:34:02
其它你可能感兴趣的问题
上一篇检查数字是否有小数位/是整数 下一篇如何在删除前显示确认消息？