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

ChrisW picture ChrisW · Oct 30, 2009 · Viewed 36.9k times · Source

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.

Answer

Asaph picture Asaph · Oct 30, 2009

Stack Overflow 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.

Update 2020-09-14: Stack Overflow switched from Google's prettify to highlight.js.