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:

        <script type="text/javascript" src="[Pfad zu Javascript]/shCore.js"></script>
        <script type="text/javascript" src="[Pfad zu Javascript]/shBrushCSharp.js"></script>
      

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.

Mit folgenden Sprachen habe ich bisher Erfahrungen gesammelt (Die Quelle dazu ist hier zu finden):

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.):

        <style type="text/css">
          .syntaxhighlighter {
            overflow-y: hidden !important;
            overflow-x: auto !important;
          }
        </style>
      

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.

Formatierung von JSON Inhalten

Leider war in der Standard-Installation von Syntaxhighlighter keine Brush für das JSON-Format vorhanden. Dafür habe ich auf dieser Seite von Donovan Brown eine Implementierung einer solchen Brush gefunden.

Ich habe die Brush mit folgenden Schritten zu meiner Homepage hinzugefügt: