HTML <code>标签内的颜色（语法高亮）

Question

在像下面的代码片段中...

    class Foo
    {
      internal Foo()
      {
        for (int i = 0; i < 42; ++i);
      }
    }

当我的浏览器显示它们时，各种关键字等都是彩色编码的。

当我进行“查看源代码”时，我没有看到任何特殊的HTML代码来实现这种颜色编码。

那么这种语法特定的颜色高亮是如何实现的呢？例如，它是内置于浏览器中，还是由站点特定的JavaScript在浏览器内部编辑DOM来实现的？

我发现这是一个难以通过Google解决的问题。

- ChrisW

---

格式化是通过JavaScript事后完成的；如果您使用Chrome这样的浏览器进行“检查元素”，您会发现添加了许多span标签。 - Daniel LeCheminant

@DanielLeCheminant 所以，只使用 CSS 就无法获得相同的结果，对吗？ - carloswm85

@carloswm85 正确：不可能。CSS 几乎没有任何功能来区分单个 HTML 元素中不同部分的文本。（只有 ::first-line 和 ::first-letter。）因此，为了能够定位和样式化不同的文本部分，例如编程语言关键字如 function 或特殊符号如 {，需要在每个应该被 CSS 规则单独定位的内容周围添加 HTML 标签。 - Aaron Thoma

Answer 1

Stack Overflow使用Google的prettify JS库来进行语法高亮。它在HTML由服务器送达后在客户端执行。这就是为什么您在原始HTML源代码中看不到它的原因。如果您有像FireBug这样的浏览器插件，您可以在prettify发挥其魔力之后检查DOM。

更新2020-09-14：Stack Overflow从Google的prettify切换到highlight.js。

- Asaph

---

Firebug已经不再存在了。安息吧（它被吸收到Firefox浏览器中）。顺便说一句，很高兴能够添加一个非常简短的说明，介绍如何使用highlight.js。 - carloswm85

Answer 2

在meta.SE上有一篇非常好的FAQ什么是语法高亮，它是如何工作的？。

这篇文章非常详细。为了方便起见，我将引用与您的问题最相关的部分：

---

它是如何工作的？

在创建或编辑帖子时，只要您停止输入5秒钟，语法高亮就会根据问题的标签分配到预览中。

Stack Exchange没有自己的语法高亮引擎。它使用highlight.js，并且可能不一定使用该库的最新版本。因此，任何关于语法高亮的错误和功能请求都无法由Stack Exchange处理。

为什么我的代码没有正确地高亮显示？

[ 继续阅读原始帖子... ]

- Aaron Thoma

---

抱歉，因为这个回答太长，所以被踩了，只需简单解释并附上链接即可。 - Alexander Mills

可能需要将此答案移动到：https://meta.stackexchange.com/questions/981/syntax-highlighting-language-hints - Alexander Mills

@AlexanderMills，这段话确实有点长，我想你是对的。感谢您的建议。 - Aaron Thoma

Answer 3

这是一个JavaScript库。市面上有很多种，其中最受欢迎的是SyntaxHighlighter。而我个人最喜欢的则是Chili。

- David Brown

---

尝试使用highlight.js，因为它有许多样式可供选择。最终成功使用prism.js。 - noobninja

链接到Chili的已经失效了 :( - Alexander Mills

highlight.js 看起来很容易使用 - 这是我找到的最佳解决方案。 - Jono