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

Color (syntax highlighting) within an HTML <code> tag

提问by ChrisW

In a code fragment like the following ...

在如下代码片段中...

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

... its various keywords and so on are color-coded when they're displayed in my browsers.

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

When I do "View source", I don't see anything special in the HTML that would implement this color-coding.

当我执行“查看源代码”时，我在 HTML 中没有看到任何可以实现这种颜色编码的特殊内容。

How and/or where is this syntax-specific color-highlighting implemented, then? For example is it built-in to the browsers, or is it implemented by site-specific JavaScript editing the DOM within the browsers?

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

I find this a difficult question to Google for.

我发现这对谷歌来说是一个很难回答的问题。

回答by Asaph

Stackoverflow uses Google's prettifyJS library for doing syntax highlighting. It executes on the client side after the HTML has been delivered by the server. That's why you don't see it in the raw HTML source. If you have a browser plugin such as FireBug, you'll be able to inspect the DOM after prettify has done its magic.

Stackoverflow 使用Google 的 prettifyJS 库进行语法高亮显示。它在服务器交付 HTML 后在客户端执行。这就是为什么您在原始 HTML 源代码中看不到它的原因。如果你有一个浏览器插件，比如FireBug，你就可以在 prettify 发挥它的魔力后检查 DOM。

回答by David Brown

It's a Javascript library. There are quite a few out there, the most popular being SyntaxHighlighter. My personal favorite is Chili, though.

它是一个 Javascript 库。那里有很多，最受欢迎的是SyntaxHighlighter。不过，我个人最喜欢的是辣椒。

回答by Aaron Thoma

There is an excellent FAQ What is syntax highlighting and how does it work?over on meta.SE.

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

I'm fully quoting it here for your convenience, but you may want to check the original post for updates to the list of supported languages.

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

---

---

What is syntax highlighting?

什么是语法高亮？

Syntax highlighting allows code in posts to be highlighted based on the language it's written in, to make it easier to read.

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

How does it work?

它是如何工作的？

Stack Exchange does not have its own syntax highlighting engine.It uses Google Code Prettify. Therefore, any bugs and feature requests regarding syntax highlighting cannot be handled by Stack Exchange and should be directed to the team behind Google Code Prettify.

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

Syntax highlighting is assigned to the preview when creating or editing posts as soon as you stop typing for 5 seconds.

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

Prettifysupports a list of core languagesthat it can highlight (including C/C++, C#, Java, JavaScript/CoffeScript, Perl, Python, Ruby, Regex, Bash, HTML, XML), along with a defaultgeneric highlighter that works passably on most C-like languages and HTML-like markup languages. Additional languages are implemented as extensions(each lang-*.jsfile).

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

Why isn't my code being highlighted correctly?

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

If your post doesn't have the correct highlighting, it's possible it's not supported. Please look at the list of Prettify supported languages. If your language is not on the list, it needs to be created within the Prettify project before it can be deployed by Stack Exchange.

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

If a language that could be applied to a tag is already on the list but not used on Stack Exchange, please raise a feature request here on Meta to have it deployed on the network.

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

How do I report a bug or request a new language?

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

If it is indeed a bug in the syntax highlighter itself, check the issues listto see if it has already been reported. If it hasn't, feel free to report it or join the projectand submit a fix yourself. If you want to ensure that an issue you raised is fixed quickly, it's best to include the fix in the report. If the fix has already been implemented by Prettify but is still not working here, please raise a feature request on Meta to request that a new version of Prettify be deployed.

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

You can also submit a request for a new language to be added in that same issues list. Keep in mind that Stack Exchange does notmaintain this syntax highlighter, and posting bug reports or feature requests concerning it here on Meta will not get them fixed or implemented.

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

Before you do anything, make surethat you've got the correct highlighting turned on.

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

How does it determine the language for syntax highlighting?

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

Behind the scenes, Stack Exchanges uses the tags on the questionto infer the language you are using. If there's more than one tag that has syntax highlighting, it uses a default and lets Prettify infer what's the best language to use.

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

If you're curious whether a tag has a language hint, any user is capable of checking by visiting that tag's wiki page. The language hint (if any) that is currently being used for that tag will be displayed at the very bottom, below the buttons for the wiki:

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

It is possible to explicitly overridethe highlighting in use with your language of choice by specifying a language hint above the code block:

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

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

    code goes here

You may use either a language codeor a tagname in the language hint to activate syntax highlighting. See below for the complete list of prettify supported language codes.

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

For example:

例如：

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];

If you don't want to have any syntax highlighting you can use the lang-nonelanguage:

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

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

You can also apply a language hint to allcode blocks in your post (so you don't have to add a hint before each one):

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

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

---

---

Hinting: Language Codes

提示：语言代码

This is a complete list of every identifier that you can use in the language hint for syntax highlighting.

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

Core:

核：

• Default: let Prettify interpret the code and guess
  default
• None: explicitly do not use any syntax highlighting
  lang-none
• Bash and other Shell scripting
  lang-bash, lang-bsh, lang-csh, lang-sh
• C, C++, Objective-C, et al.
  lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
• C#
  lang-cs
• CoffeeScript
  lang-coffee
• HTML, XML, XSL, et al.
  lang-html, lang-xml, lang-xsl
• Java
  lang-java
• JavaScript
  lang-js, lang-javascript
• JSON
  lang-json
• Perl
  lang-pl, lang-perl
• Python
  lang-py, lang-python, lang-cv
• Regex
  lang-regex
• Ruby
  lang-rb, lang-ruby
• Rust
  lang-rc, lang-rs, lang-rust

• 默认：让 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

Extensions:

扩展：

• Clojure
  lang-clj
• CSS
  lang-css
• Dart
  lang-dart
• Erlang
  lang-erl, lang-erlang
• Go
  lang-go
• Haskell
  lang-hs
• LaTeX, TeX
  lang-latex, lang-tex
• Lisp, Scheme
  lang-cl, lang-el, lang-lisp, lang-lsp, lang-scm, lang-ss, lang-rkt
• Lua
  lang-lua
• MATLAB
  lang-matlab
• OCaml, SML, F#, et al.
  lang-fs, lang-ml
• Pascal, Delphi
  lang-pascal
• Protocol Buffers
  lang-proto
• R, S
  lang-r, lang-s
• Scala
  lang-scala
• SQL
  lang-sql
• VHDL
  lang-vhdl, lang-vhd
• Visual Basic, VBScript
  lang-vb, lang-vbs

• 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

Hinting: Tags

提示：标签

You can specify any tag that exists on the site, and it will use whatever language code is currently associated with that tag (which can be either null(no hint), default, or a specificlanguage-code).

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

Keep in mind that by default all tags start off with noneas their language code. Tags with nonespecified as their language code will be ignored and revert to default.

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

You can also use the plain nonekeyword to manually specify no syntax highlighting, similar to using the lang-nonecode above.

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

---

---

Note to editors:

Please do not add to the above list unless you are 100% sure it exists.Just because you type something in and it lookslike it's highlighted correctly does notmean the identifier actually exists in the system. Keep in mind that invalid identifiers revert back to default. Please link to the Meta question which confirms a hint's existence in your edit summarywhen adding a new hint to the list.

Note to commenters:

The comments on this FAQ are for requesting clarification of something you might not understand in the FAQ so that it can be fixed. Please DO NOTask if certain languages will be supported in the future. That is nota question we can answer because Stack Exchange does not maintain this highlighter. Visit Google Code Prettifyfor language support.

编者注：

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

评论者注意：

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