HTML <code> tag</code>中的颜色（语法高亮）

时间：2009-10-30 02:43:26

标签： html syntax-highlighting color-coding

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

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

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

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

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

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

3 个答案:

答案 0 :(得分：19)

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

答案 1 :(得分：4)

这是一个Javascript库。那里有很多，最受欢迎的是SyntaxHighlighter。我个人最喜欢的是Chili。

答案 2 :(得分：1)

meta.SE上有一个很好的常见问题What is syntax highlighting and how does it work?。

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

什么是语法高亮？

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

它是如何工作的？

Stack Exchange没有自己的语法高亮引擎。它使用Google Code Prettify。因此，任何有关语法突出显示的错误和功能请求都无法由Stack Exchange处理，应该直接发送给Google Code Prettify背后的团队。

在您停止键入5秒钟后立即创建或编辑帖子时，语法高亮显示会分配给预览。

Prettify支持它可以突出显示的core languages列表（包括C / C ++，C＃，Java，JavaScript / CoffeScript，Perl，Python，Ruby，Regex，Bash，HTML，XML），以及默认通用荧光笔，可以在大多数类C语言和类似HTML的标记语言上使用。其他语言实现为extensions（每个lang-*.js文件）。

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

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

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

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

如果确实是语法高亮显示器本身的错误，请检查issues list以查看是否已报告。如果还没有，请随时报告或join the project并自行提交修复。如果您想确保快速修复所引发的问题，最好在报告中包含修复程序。如果修复程序已经由Prettify实现但仍未在此处运行，请在Meta上提出功能请求以请求部署新版本的Prettify。

您还可以在that same issues list中提交要添加新语言的请求。请记住，Stack Exchange 不维护此语法高亮显示，并且在Meta上发布有关它的错误报告或功能请求将无法修复或实现它们。

在您执行任何操作之前，请确定您已启用正确的突出显示。

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

在幕后，Stack Exchange使用the tags on the question来推断您正在使用的语言。如果有多个具有语法突出显示的标记，它会使用默认值并让Prettify推断出最适合使用的语言。

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

  

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

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

<!-- 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，et al。
    lang-c，lang-cc，lang-cpp，lang-cxx，lang-cyc，lang-m
  • 的 C＃
    lang-cs
  • 的的CoffeeScript
    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
  • 的的Python
    lang-py，lang-python，lang-cv
  • 的正则表达式
    lang-regex
  • 的红宝石
    lang-rb，lang-ruby
  • 的锈
    lang-rc，lang-rs，lang-rust

扩展：

提示：标签

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

请注意，默认情况下，所有代码都以none作为语言代码开始。将none指定为其语言代码的代码将被忽略并恢复为default。

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

  

编者注：

     

请不要添加到上面的列表中，除非您100％确定它存在。只是因为您输入内容并且看起来像一样突出显示正确 不 表示标识符实际存在于系统中。请注意，无效标识符会恢复为默认。 在向列表添加新提示时，请链接到Meta问题，该问题确认编辑摘要中存在提示。

     

评论者注意：

     

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

相关问题
最新问题