How Code Color is Set in StackOverflow?

Question

The most favorite feature of StackOverflow for me is that it can automatically detect code in post and set appropriate color to the code.

I'm wondering how the color is set. When I do a Ctrl+F5 on a page, the code seems first be black text, then change to be colorful at a glance. Is it be done by jQuery?

Answer 1

From Stack Overflow Podcast #11:

Atwood: It is. Okay, so that comes from, that's a project some Google engineer, I think, wrote it--it's called "Prettify." And it's a little interesting in that it actually infers all the syntax highlighting, which sounds like it couldn't possibly work--it sounds actually insane, if you think about it. But it actually kind of works. Now, he only supports it for, there's certain dialects that just don't really work well with it, but for all the dialects that sort of, you'd find on Google. I think it comes from Google's Google Code. It's the actual code, it's the actual JavaScript which is on Google Code that highlights that the code that comes back when you're hosting projects on Google Code. And you, and you, um, 'cause I think they use Subversion so you can actually click through...

Spolsky: How do they know, how do they even know what language you're writing in? And therefore, what a comment is and...

Atwood: I don't know. It's crazy. It's prettify.js, so if anyone's interested in looking at this, just do a web search for "prettify.js," and you'll find it.

And here's where you can find prettify.js: http://code.google.com/p/google-code-prettify/

Answer 2

In reply to..

Spolsky: How do they know, how do they even know what language you're writing in?

It doesn't. The highlighter is very dumb, but manages to gets away with it because most programming languages are so similar. Nearly everything uses syntax close-enough to..

AFunction("a string")
1 + 4 # <- numbers
      #     /\ a comment
      // also a comment..

..that most stuff highlights properly. The above isn't an actuall programming language, but it highlights perfectly.

There are exceptions, for example, it can sometimes treat a / as the start of a regex (as in Perl/Ruby). when it is not:

this [^\s>/] # is highlighted as a regex, not a comment

..but these are fairly rare, and it does a good job of working out most stuff, like..

/*
this is a multi-line comment
"with a string" =~ /and a regex/
*/
but =~ /this is a regex with a [/*] multiline comment
markers in it! */

Answer 3

As said by dbr, it does a dummy highlight of most common constructs of languages. Which doesn't work well with some exotic syntaxes. I wonder if we can do code sections without highlighting, BTW.

For id = 1 To 10 Do
  CallSomething() // It likes CamelCase identifiers...
End

for id = 1 to 10 do # Also highlight some common keywords...
  if id % 2 then call_something(); x++; end
end

'str' "str" 12 + 15.6 * -7e+9 /* Some common constant forms */
=/regex/ ~/regex/ +/RE/ !/regexpr/ but not /[^regex]/ (no operator before it)

(* Some comment conventions are overlooked... *)
-- Lua's (and some other languages')
; So are these comments...
' And these (Basic)

Works well enough for common code to make illusion, and better than loading dozen of syntaxes in the browser.