javascript - StackOverflow 中如何设置代码颜色？

Question

StackOverflow 对我来说最喜欢的功能是它可以在 post 中自动检测代码并为代码设置适当的颜色。

我想知道颜色是如何设置的。当我在页面上做Ctrl+F5时，代码似乎首先是黑色文本，然后变为彩色。它是由 jQuery 完成的吗？

Answer 1

来自Stack Overflow 播客 #11：

阿特伍德：是的。好的，这来自于我认为是某个 Google 工程师编写的项目——它被称为“Prettify”。有趣的是，它实际上推断出所有的语法高亮，这听起来像是不可能的——如果你仔细想想，这听起来真的很疯狂。但它实际上有点工作。现在，他只支持它，有些方言不能很好地使用它，但是对于所有那种方言，你可以在谷歌上找到。我认为它来自谷歌的谷歌代码。它是实际代码，它是 Google Code 上的实际 JavaScript，它突出显示了当您在 Google Code 上托管项目时返回的代码。还有你，还有你，嗯，'

Spolsky：他们怎么知道，他们怎么知道你写的是什么语言？因此，评论是什么，并且...

阿特伍德：我不知道。这很疯狂。它是 prettify.js，所以如果有人对此感兴趣，只需在网络上搜索“prettify.js”，你就会找到它。

在这里你可以找到 prettify.js：http ://code.google.com/p/google-code-prettify/

Answer 2

在回复..

Spolsky：他们怎么知道，他们怎么知道你写的是什么语言？

它没有。荧光笔非常愚蠢，但由于大多数编程语言非常相似，因此设法摆脱了它。几乎所有东西都使用足够接近的语法来......

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

..大多数东西都能正确突出显示。以上不是一种实际的编程语言，但它完美地突出显示。

也有例外，例如，它有时可以将 a/视为正则表达式的开头（如在 Perl/Ruby 中）。如果不是：

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

..但这些是相当罕见的，它可以很好地解决大多数事情，比如..

/*
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

正如 dbr 所说，它对最常见的语言结构做了一个虚拟的亮点。这不适用于一些奇异的语法。我想知道我们是否可以在不突出显示的情况下进行代码部分，顺便说一句。

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)

足以让普通代码产生错觉，并且比在浏览器中加载十几个语法更好。