Wie wird die Codefarbe in StackOverflow eingestellt?

Question

Die beliebteste Funktion von StackOverflow ist für mich, dass es automatisch Code in Beiträgen erkennen und dem Code eine entsprechende Farbe zuweisen kann.

Ich frage mich, wie die Farbe eingestellt wird. Wenn ich eine Ctrl + F5 auf einer Seite erscheint der Code zunächst als schwarzer Text, dann wird er farbig. Ist es durch jQuery getan?

Answer 1

Von Stack Overflow Podcast #11 :

Atwood: Das ist es. Okay, das stammt von einem Projekt, das ein Google-Ingenieur, glaube ich, geschrieben hat - es heißt "Prettify". Es ist insofern interessant, als dass es die gesamte Syntaxhervorhebung herleitet, was sich so anhört, als könnte es nicht funktionieren - es klingt eigentlich verrückt, wenn man darüber nachdenkt. Aber es funktioniert tatsächlich irgendwie. Nun, er unterstützt es nur für bestimmte Dialekte, die nicht wirklich gut damit funktionieren, aber für alle Dialekte, die man bei Google finden kann. Ich glaube, es kommt von Googles Google Code. Es ist der eigentliche Code, es ist das eigentliche JavaScript, das in Google Code enthalten ist, das den Code hervorhebt, der zurückkommt, wenn Sie Projekte in Google Code hosten. Und du, und du, ähm, weil ich glaube, sie benutzen Subversion, also kannst du dich tatsächlich durchklicken...

Spolsky: Woher wissen sie, woher wissen sie überhaupt, in welcher Sprache du schreibst? Und daher, was ein Kommentar ist und...

Atwood: Ich weiß es nicht. Es ist verrückt. Es heißt prettify.js. Wenn also jemand Interesse daran hat, sich das anzusehen, macht einfach eine Websuche nach "prettify.js" und ihr werdet es finden.

Und hier können Sie prettify.js finden: http://code.google.com/p/google-code-prettify/

Answer 2

In reply to..

Spolsky: Woher wissen sie, woher wissen sie überhaupt, in welcher Sprache du schreibst?

Das tut er nicht. Der Textmarker ist sehr dumm, aber er kommt damit durch, weil die meisten Programmiersprachen so ähnlich sind. Fast alles verwendet eine Syntax, die nahe genug an

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

dass die meisten Dinge richtig hervorgehoben werden. Die oben ist nicht eine actuall Programmiersprache, aber es Highlights perfekt.

Es gibt Ausnahmen, z. B. kann es manchmal eine / als Anfang eines Regex (wie in Perl/Ruby). wenn nicht:

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

aber die sind eher selten, und das meiste lässt sich gut ausarbeiten, z. B..

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

Wie bereits von dbr erwähnt, werden die gängigsten Konstrukte von Sprachen in einem Dummy hervorgehoben. Was bei einigen exotischen Syntaxen nicht so gut funktioniert. Ich frage mich, ob wir Codeabschnitte ohne Hervorhebung machen können, 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)

Funktioniert gut genug für gewöhnlichen Code, um Illusionen zu erzeugen, und besser als das Laden von Dutzenden von Syntaxen im Browser.