HTML <code> 标记内的颜色（语法突出显示）

StackOverflow https://stackoverflow.com/questions/1647724

题

在如下代码片段中...

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

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

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

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

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

有帮助吗？

解决方案

＃1使用谷歌的美化 JS库做语法高亮。它执行在客户端的HTML已通过服务器下发后。这就是为什么你没有看到它的原始HTML源文件。如果你有一个浏览器插件，如萤火，你就可以检查DOM美化做了它的魔力了。

其他提示

这是一个Javascript库。有不少在那里，最流行的是 SyntaxHighlighter的。我个人最喜欢的是辣椒，虽然。

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

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

什么是语法高亮？

语法突出显示允许根据编写的语言突出显示帖子中的代码，以使其更易于阅读。

它是如何工作的？

Stack Exchange 没有自己的语法突出显示引擎。 它用 谷歌代码美化. 。因此，任何有关语法突出显示的错误和功能请求都无法由 Stack Exchange 处理，应直接发送给 Google Code Pretify 背后的团队。

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

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

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

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

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

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

如果确实是语法荧光笔本身的错误，请检查 问题清单 看看是否已经被报道过。如果没有，请随时报告或 加入项目 并自行提交修复。如果您想确保您提出的问题得到快速解决，最好将修复结果包​​含在报告中。如果该修复已由 Prettify 实施，但在此处仍不起作用，请在 Meta 上提出功能请求，请求部署新版本的 Prettify。

您还可以提交添加新语言的请求 相同的问题列表. 。请记住堆栈交换 才不是 维护这个语法荧光笔，并在 Meta 上发布与其相关的错误报告或功能请求不会让它们得到修复或实现。

在你做任何事之前，先做 当然 您已打开正确的突出显示。

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

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

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

Code language (used for syntax highlighting): lang-java

有可能 显式覆盖 通过在代码块上方指定语言提示来突出显示您选择的语言：

<!-- 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
  • 珀尔
    lang-pl, lang-perl
  • Python
    lang-py, lang-python, lang-cv
  • 正则表达式
    lang-regex
  • 红宝石
    lang-rb, lang-ruby
  • 锈
    lang-rc, lang-rs, lang-rust

扩展：

提示：标签

您可以指定网站上存在的任何标签，它将使用当前与该标签关联的任何语言代码（可以是 无效的 （没有提示）， 默认, ，或一个 具体的 语言代码）。

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

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

编辑注意：

除非您 100% 确定它存在，否则请不要添加到上面的列表中。 只是因为你输入一些东西然后它 看起来 就像它正确突出显示一样 才不是 表示该标识符实际存在于系统中。请记住，无效标识符会恢复为 默认. 请链接到元问题，该问题确认您的编辑摘要中存在提示 将新提示添加到列表时。

评论者请注意：

此常见问题解答的评论旨在要求您澄清常见问题解答中可能不理解的内容，以便可以修复它。请 不要 询问将来是否支持某些语言。那是 不是 我们可以回答这个问题，因为 Stack Exchange 不维护此荧光笔。访问 谷歌代码美化 用于语言支持。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top