Syntax Highlighter
Auf dieser Seite gibt es einen kurzen Erfahrungsbericht über das Arbeiten mit Syntax Highlighter:

Was ist Syntax Highlighter?

Syntax Highlighter ist eine Javascript-Library, um Source-Code Abschnitte auf HTML-Seiten auf einfachem Wege schön formatieren zu können.

Diese Library ermöglicht es, den Source-Code so wie er ist in den HTML-Code einzufügen. Man muss also (so manche) spitze Klammern nicht durch HTML-Entities ersetzen oder Zeilenschaltungen hinzufügen. Auch Leerzeichen und Tabulatoren werden automatisch interpretiert und man muss nicht mit non-breaking space Entities arbeiten.

Zusätzlich wird ein Syntax-Highlighting durchgeführt, damit der Source-Code besser lesbar ist.

Wie bindet man Syntax Highlighter in die HTML-Seite ein?

Zunächst muss man die CSS-Datei einfügen, welche das Layout des Source-Codes festlegt. Ich habe bisher nur mit dem Standard-Layout Erfahrungen gesammelt. D.h. ich habe die CSS-Datei shCoreDefault.css eingebunden.
        
      
Danach muss man die Javascript-Dateien einbinden. Dafür ist zunächst immer die Datei shCore.js nötig. Zusätzlich ist noch die Javascript-Datei, die für die jeweilige Programmiersprache benötigt wird, einzubinden. (Eine Liste von Programmiersprachen und der dazugehörigen Javascript-Dateien findet man hier.)

Für C# würde folgender HTML-Code verwendet werden:
        
        
      
Zusätzlich muss die Javascript-Funktion SyntaxHighlighter.all(); danach aufgerufen werden.
        
      
Wenn man diese Zeilen im head Abschnitt der HTML-Datei eingefügt hat, dann muss man im body lediglich jene Bereiche mit Source code in einen pre Abschnitt geben und die Sprache angeben. Für C# würde dies so aussehen.
        <pre class="brush: csharp;">
          My C# code!!!
        </pre>
      
(Eine Liste von Programmiersprachen und der dazugehörigen Kennzeichnungen für den pre Abschnitt findet man hier.)

Mit welchen Konfigurationen habe ich Erfahrungen?

Die Konfiguration eines Source-Code Abschnitts wird über das class Attribut des pre Tags festgelegt. Dabei habe ich bisher mit folgenden Einstellungen Erfahrungen gesammelt.
  • toolbar: false; - Blendet das Fragezeichen aus, das einen Hinweis auf den Syntax Highlighter anzeigt, wobei ich beim ersten Code-Abschnitt auf einer Seite, diesen Hinweis angeblendet lasse.
  • gutter: false; - Blendet die Zeilennummerierung aus.
Mit folgenden Sprachen habe ich bisher Erfahrungen gesammelt (Die Quelle dazu ist hier zu finden):
  • brush: csharp; - C# (shBrushCSharp.js)
  • brush: html; - HTML (shBrushXml.js)
  • brush: xml; - XML (shBrushXml.js)
  • brush: css; - CSS (shBrushCss.js)
  • brush: sql; - SQL (shBrushSql.js)
Für die Code für Windows Command Prompt gibt es leider keine passende Javascript-Datei. Außerdem würden die Zeilenlängen nur eine Anzeige mit horizontalem Scrollbar zulassen. Deshalb habe ich mich entschieden, diese Codes weiterhin mit einem code Tag anzuzeigen.

Problembehandlungen

Bei mir wurde ab 3 oder 4 Zeilen automatisch ein vertikaler Scrollbar angezeigt. Das kann mit folgendem CSS-Eintrag im HTML - Kopf lösen (Auf diese Lösung bin ich hier gestoßen.):
        
      
Bei XML und bei HTML Code muss man die öffnende spitze Klammer durch die Entität &lt; ersetzen. Ansonsten kann es bei sich selbst schließenden Tags dazukommen, dass automatisch ein schließender Tag eingeblendet wird. Außerdem wurde auf dieser Seite im Beispiel, wie man für C# ein Syntax-Highlighting einstellt, ein echtes Syntax-Highlighting für C# interpretiert, obwohl ich nur den HTML-Code dafür anzeigen wollte.