Syntaxhighlighting in Blogger

In meinem letzten Post wollte ich zum ersten mal hier auf blogger Quelltext posten. Damit der Code auch schön lesbar ist, sollte farbige Untermalung durch Syntaxhighlighting natürlich nicht fehlen.

1 int main( int argc, char * * argv )
2 {
3   return 0;
4 }

Da blogger das allerdings nicht von Haus aus unterstützt, habe ich mich auf die Suche nach Lösungen gemacht:

Gerne werden offensichtlich Java Skript Plugins wie z.B. SyntaxHighlighter verwendet. Allerdings gefällt mir die Vorstellung, den Code jedesmal aufs neue durch ein Skript bearbeiten lassen zu müssen (und das bei jedem Benutzer bei jedem Aufruf der Seite seperat) nicht besonders, woran auch bestehende Cache-Lösungen nichts ändern.

Eine andere Lösung ist es, z.B. auf github / Sourceforge oder ähnliches zu verweisen und das Syntaxhighlighting von diesen Seiten übernehmen zu lassen.
Das löst (teilweise) das JavaSkript Problem, hat für mich aber den Nachteil auf externe Seiten angewiesen zu sein. Außerdem halte ich es für übertrieben, einen Account bei obiger Seite nur für Code Schnipsel anzulegen.

Die Lösung für mich ist daher, den Code offline in brauchbares HTML übersetzen zu lassen und dieses dann im blogger Editor einzutragen.

Genau das kann VIM mit dem Befehl :TOhtml

Dabei wird aus dem Dokument im Fokus eine HTML Datei (die sogar den Validator zufrieden stellt) generiert und in einem neuen Fenster geöffnet. Der erstellte HTML Code muss allerdings noch verändert werden, um in blogger eingefügt werden zu können.

Veranschaulichen möchte ich das an dem obigen Beispiel. Die Ausgabe von :TOhtml sieht dabei folgendermaßen aus:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <title>~/Projekte/avr32_quadrocopter/src/neu.c.xhtml</title>
 6 <meta name="Generator" content="Vim/7.3" />
 7 <meta name="plugin-version" content="vim7.3_v10" />
 8 <meta name="syntax" content="c" />
 9 <meta name="settings" content="number_lines,use_xhtml,use_css,pre_wrap,expand_tabs" />
10 <style type="text/css">
11 
12 pre { white-space: pre-wrap; font-family: monospace; color: #dddddd; background-color: #19191d; }
13 body { font-family: monospace; color: #dddddd; background-color: #19191d; }
14 .lnr { color: #ffff00; }
15 .Constant { color: #238bcc; background-color: #19191d; }
16 .Statement { color: #9fc439; background-color: #19191d; }
17 .Type { color: #e08a1f; background-color: #19191d; }
18 
19 </style>
20 </head>
21 <body>
22 <pre>
23 <span class="lnr">1 </span><span class="Type">int</span> main( <span class="Type">int</span> argc, <span class="Type">char</span> * * argv )
24 <span class="lnr">2 </span>{
25 <span class="lnr">3 </span>  <span class="Statement">return</span> <span class="Constant">0</span>;
26 <span class="lnr">4 </span>}
27 </pre>
28 </body>
29 </html>

Daraus nimmt man nun Zeile 10 bis Zeile 19 (Das style Element) und fügt es entweder in den Blogeintrag (HTML Modus des Editors) oder zum CSS Code des gesamten Blogs hinzu. (letzteres habe ich noch nicht getestet)

Wichtig ist nur, die Definitionen in Zeile 12 und 13 zu verändern, ansonsten verändert sich das komplette Aussehen des Blogs.

In Zeile 12 ändert man das pre um zu .CODEpre 
In Zeile 13 ändert man das body um zu .CODEbody
(man beachte jeweils den Punkt!)

Damit diese geänderten Regeln auch im HTML Code greifen, muss ...

•  Zeile 21 zu <pre class="CODEbody" >
•  Zeile 22 zu <pre class="CODEpre" >
•  Zeile 28 zu </pre>

... geändert werden.

Der so veränderte Code von Zeile 21 bis Zeile 28 kann nun im Editor von blogger (im HTML Modus) eingetragen werden. Eventuell müssen allerdings noch Anpassungen vorgenommen werden, um z.B. lange Codeblöcke mit einem Scrollbalken zu versehen.

Zugegebenermaßen, das ist lange nicht so komfortabel wie JavaSkript basierte Verfahren. Aber dafür lässt sich vielleicht ein Skript schreiben (wenn ich die Zeit dazu finde) um die nötigen Schritte zu automatisieren.

Liebe Grüße!