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

问题

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.

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?

I find this a difficult question to Google for.

回答1:

Stackoverflow uses Google's prettify JS 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.

回答2:

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

回答3:

There is an excellent FAQ What is syntax highlighting and how does it work? over on 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.

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

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

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.

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.

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 list to see if it has already been reported. If it hasn't, feel free to report it or join the project and 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.

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 not maintain this syntax highlighter, and posting bug reports or feature requests concerning it here on Meta will not get them fixed or implemented.

Before you do anything, make sure that 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 question to 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.

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:

It is possible to explicitly override the 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 code or a tag name 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-none language:

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

You can also apply a language hint to all code 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

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

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 specific language-code).

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

You can also use the plain none keyword to manually specify no syntax highlighting, similar to using the lang-none code above.

---

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 looks like it's highlighted correctly does not mean 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 summary when 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 NOT ask if certain languages will be supported in the future. That is not a question we can answer because Stack Exchange does not maintain this highlighter. Visit Google Code Prettify for language support.

来源：https://stackoverflow.com/questions/1647724/color-syntax-highlighting-within-an-html-code-tag