HTML <code>标记内的颜色(语法高亮显示)

Question

在如下代码片段中......

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

...当它们在我的浏览器中显示时,它的各种关键字等都会进行颜色编码.

当我执行"查看源代码"时,我没有看到HTML中有任何特殊内容可以实现此颜色编码.

然后,如何和/或在何处实现这种特定于语法的颜色突出显示？例如,它内置于浏览器中,还是通过特定于站点的JavaScript编辑浏览器中的DOM来实现？

我觉得这对谷歌来说是个难题.

Answer 1

Stackoverflow使用Google的美化 JS库来进行语法突出显示.它在服务器交付HTML后在客户端执行.这就是为什么你没有在原始HTML源代码中看到它.如果你有一个像FireBug这样的浏览器插件,那么你就能够在美化完成魔法之后检查DOM.

Answer 2

有一个很好的常见问题解答什么是语法高亮以及它是如何工作的？在 meta.SE 上。

为了您的方便，我在这里完全引用它，但您可能需要查看原始帖子以获取支持语言列表的更新。

什么是语法高亮？

语法高亮允许基于其编写的语言高亮显示帖子中的代码，以使其更易于阅读。

它是如何工作的？

Stack Exchange 没有自己的语法高亮引擎。它使用Google Code Prettify。因此，Stack Exchange 无法处理有关语法高亮显示的任何错误和功能请求，应将其提交给 Google Code Prettify 背后的团队。

创建或编辑帖子时，只要您停止输入 5 秒钟，就会将语法突出显示分配给预览。

Prettify支持它可以突出显示的核心语言列表（包括 C/C++、C#、Java、JavaScript/CoffeScript、Perl、Python、Ruby、Regex、Bash、HTML、XML），以及一个默认的通用突出显示大多数类似 C 的语言和类似 HTML 的标记语言。其他语言作为扩展（每个lang-*.js文件）实现。

为什么我的代码没有正确突出显示？

如果您的帖子没有正确突出显示，则可能不受支持。请查看Prettify 支持的语言列表。如果您的语言不在列表中，则需要在 Prettify 项目中创建它，然后 Stack Exchange 才能部署它。

如果可以应用于标签的语言已经在列表中但未在 Stack Exchange 上使用，请在 Meta 上提出功能请求以将其部署在网络上。

如何报告错误或请求新语言？

如果它确实是语法高亮器本身的错误，请检查问题列表以查看它是否已被报告。如果没有，请随时报告或加入项目并自己提交修复。如果您想确保您提出的问题得到快速修复，最好将修复包含在报告中。如果修复已经由 Prettify 实施但在这里仍然不起作用，请在 Meta 上提出功能请求以请求部署新版本的 Prettify。

您还可以提交在同一问题列表中添加新语言的请求。请记住，Stack Exchange不维护此语法高亮器，并且在 Meta 上发布有关它的错误报告或功能请求不会得到修复或实施。

在你做任何事情之前，确保你已经打开了正确的突出显示。

它如何确定语法高亮的语言？

在幕后，Stack Exchanges 使用问题上的标签来推断您使用的语言。如果有多个具有语法突出显示的标签，它会使用默认值并让 Prettify 推断出最好使用的语言。

如果您想知道某个标签是否有语言提示，任何用户都可以通过访问该标签的 wiki 页面进行检查。当前用于该标签的语言提示（如果有）将显示在最底部，在 wiki 按钮下方：

通过在代码块上方指定语言提示，可以显式覆盖使用您选择的语言的突出显示：

<!-- language: lang-or-tag-here -->

    code goes here

您可以在语言提示中使用语言代码或标签名称来激活语法突出显示。有关美化支持的语言代码的完整列表，请参见下文。

例如：

Here is a code block with language code as hint:

<!-- language: lang-js -->

    function greet(person) {
        return "Hello " + person;
    }
    var user = "John Doe";
    alert(greet(user));

Here is a code block with tag name as hint:

<!-- language: typescript -->

    var arr = [0, 1, 2];

如果您不想突出显示任何语法，可以使用以下lang-none语言：

<!-- language: lang-none -->

您还可以对帖子中的所有代码块应用语言提示（因此您不必在每个代码块之前添加提示）：

<!-- language-all: lang-or-tag-here -->

提示：语言代码

这是您可以在语言提示中用于语法高亮显示的每个标识符的完整列表。

核：

• 默认：让 Prettify 解释代码并猜测
  default
• 无：明确不使用任何语法高亮
  lang-none
• Bash和其他shell脚本
  lang-bash，lang-bsh，lang-csh，lang-sh
• C、C++、Objective-C 等。
  lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc,lang-m
• C＃
  lang-cs
• 咖啡脚本
  lang-coffee
• HTML、XML、XSL 等。
  lang-html, lang-xml,lang-xsl
• 爪哇
  lang-java
• JavaScript的
  lang-js，lang-javascript
• JSON
  lang-json
• Perl中
  lang-pl，lang-perl
• 蟒蛇
  lang-py，lang-python，lang-cv
• 正则表达式
  lang-regex
• 红宝石
  lang-rb，lang-ruby
• 锈
  lang-rc, lang-rs,lang-rust

扩展：

• Clojure
  lang-clj
• CSS
  lang-css
• 镖
  lang-dart
• 二郎
  lang-erl，lang-erlang
• 走
  lang-go
• 哈斯克尔
  lang-hs
• 乳胶，特克斯
  lang-latex，lang-tex
• Lisp, Scheme
  lang-cl , lang-el, lang-lisp, lang-lsp, lang-scm, lang-ss,lang-rkt
• 路亚
  lang-lua
• MATLAB
  lang-matlab
• OCaml、SML、F# 等。
  lang-fs,lang-ml
• 帕斯卡，德尔福
  lang-pascal
• 协议缓冲区
  lang-proto
• R, S
  lang-r ,lang-s
• 斯卡拉
  lang-scala
• SQL
  lang-sql
• VHDL
  lang-vhdl，lang-vhd
• Visual Basic, VBScript
  lang-vb ,lang-vbs

提示：标签

您可以指定站点上存在的任何标记，它将使用当前与该标记关联的任何语言代码（可以是null（无提示）、默认值或特定语言代码）。

请记住，默认情况下，所有标签都none以其语言代码开头。none指定为其语言代码的标签将被忽略并恢复为default.

您还可以使用 plainnone关键字手动指定不突出显示语法，类似于使用lang-none上面的代码。

编者注：

请不要添加到上面的列表中，除非您 100% 确定它存在。仅仅因为你输入了一些东西并且看起来它被正确突出显示并不意味着标识符实际上存在于系统中。请记住，无效标识符会恢复为默认值。请链接到元问题，该问题在向列表中添加新提示时确认您的编辑摘要中存在提示。

评论者注意：

对此常见问题解答的评论是为了要求澄清常见问题解答中您可能不了解的内容，以便对其进行修复。请不要询问将来是否会支持某些语言。这不是我们可以回答的问题，因为 Stack Exchange 不维护这个荧光笔。访问Google Code Prettify以获得语言支持。