Syntax Highlighter in CMS

Wer Code (Sourcecode) in einem Beitrag schön formatiert präsentieren möchte, sollte einen Syntax Highligher auf seinem CMS installieren.
Denn es nimmt einem Verfasser unheimlich viel Arbeit ab.

Dabei gibt es ganz unterschiedliche Module von verschiedenen Anbietern.

Syntax Highlighter Unterschiede

Wer in der Wordpress Welt zu Hause ist sollte sich unbedingt den Crayon Syntax Highlighter anschauen.
Das ist eines der mächtigsten Plugins die es in der Wordpress Welt gibt. Dieser Syntax Highlighter kann fast jede Sprache anschaulich darstellen.
Zudem integriert er sich in die gängigen WYSIWYG Editoren.

In der Orchard CMS Welt sieht es da schon ganz anders aus.
Denn hier gib es leider nicht so viele und mächtige Plugins bzw. Module. Zumindest nicht so komfortabel.
Was ich hier benutze ist der Syntax Highlighter von http://alexgorbatchev.com/SyntaxHighlighter den es auch für Wordpress und andere Systeme gibt.
(hier der Link zum Orchard Modul)

Das Modul ist leider nicht ganz so komfortabel wie der Crayon in der Wordpress Umgebung, da das Modul sich nicht automatisch in den Text Editor einfügt.

Aber am Ende zählt das Resultat: Korrekte Formatierung auf einer Html Seite!
Man kann die SourceCodes meistens vom jeweiligen Anbieter bekommen und somit auch in fast jedes andere CMS einbauen. (Plugin, Module, Extension)

Syntax Highlighter in Benutzung

Allerdings kann man die Funktionen wie bei fast allen Highlightern durch die Quelltext Ansicht benutzen.

Dafür muß man in der Quelltext Ansicht den entsprechenden Teil mit einem <pre> Tag versehen und innerhalb des pre Tags die entpsrechende CSS Klasse hinzufügen.

Zum Beispiel bei CSharp Code:

public void main(string[] args)
{
    string text = "Hallo Welt";
    Console.WriteLine(text);
    Console.ReadKey();
}

Würde das ganze so aussehen:

<pre class="brush:csharp">
public void main(string[] args)
{
    string text="Hallo Welt"; 
    Console.WriteLine(text); 
    Console.ReadKey();
}
</pre>

D.h. man benutzt die CSS Klasse brush mit einer Art Pseudo Selektor: csharp. 
Syntax:

class:selector

Syntax Highlighter Funktionsweise

Am Ende definiert man in einem pre Html Tag die entsprechende CSS Klasse für die Sprache.
Somit wird die Darstellung des Inhaltes eines pre Tags durch die CSS Definition überschrieben.

Wer möchte kann sich gerne mal die Umfangreiche CSS Definition eines Syntax Highlighters anschauen und ggf. weiter verbessern.
Die CSS Datei(en) sollten innerhalb des Moduls / Plugins oder auf der Seite des jeweiligen Anbieters zu finden sein.

Kennt Ihr noch andere Syntax Highlighter für Wordpress oder Orchard? 
Wenn ja stellt sie vor, ich bin immer auf der Suche nach neuen Möglichkeiten.

No Comments

Add a Comment