In diesen Artikel stelle ich verschiedene JavaScript Frameworks
vor, womit man PHP Code optisch besser darstellen kann. Die hier
aufgeführten JavaScript Frameworks, habe ich alle lokal
getestet und mit einen gleichen Code Beispiel ausgeführt. Das
Code Beispiel ist fiktiv gewählt, um das Highlighting
vorzustellen. Daher möchte ich Euch bitten, dieses Beispiel
nicht so kritisch zu begutachten. :-)
Die Syntax-Hervorhebung ist sehr wichtig, vor allem, wenn man
den Code Beispiel auf ein Blog zeigen will. Durch das Aktivieren
der Syntax-Hervorhebung auf ein Blog, kann der Leser die
Code-Blöcke leichter lesen. Es gibt sehr viele kostenlose und
nützliche Scripte zur Syntax-Hervorhebungen. Alle hier
vorgestellten Frameworks sind in JavaScript geschrieben.
Kurze Erklärung: Syntaxhervorhebung ist die
Möglichkeit eines Computerprogrammes, bestimmte Wörter
und Zeichenkombinationen im Text je nach der Bedeutung in
verschiedenen Farben, Schriftarten und Schriftstilen darzustellen.
Sie kommt vor allem in Texteditoren zum Einsatz, wo die
ausgezeichneten Dokumente bearbeitet werden können.
Hervorgehoben erscheinen dann vor allem die
Schlüsselwörter.
Die Syntaxhervorhebung erleichtert die
Lesbarkeit von Texten. Dadurch kann man leichter die Texte mit
Struktur erkennen und findet die Tippfehler heraus. Der Tippfehler
führt nämlich oft zur veränderten Darstellung. Die
Syntaxhervorhebung ist heute eine Standardfunktion von vielen
unterschiedlichen Texteditoren.
SyntaxHighlighter
SyntaxHighlighter Beispiel
Mit dem SyntaxHighlighter kann man sehr einfach verschiedensten
PHP-Code schnell und einfach optisch einfärben. Die Anpassung
ist einfach und erfordert kaum Kenntnisse. Es werden die
Programmiersprachen:ActionScript3, ColdFusion, C#, C++, CSS,
Delphi, Diff, Groovy, JavaScript, Java, JavaFX, Perl, PHP, Plain
Text, PowerShell, Python , Ruby, Scala, SQL, Visual Basic , XML
xml, xhtml, xslt, html, xhtml unterstützt.
SHJS ist ein JavaScript-Programm, das die Quellcode Passagen in
HTML-Dokumenten hervorhebt. Dokumente, die über SHJS
ausgegeben werden, sind auf der Clientseite durch den Web-Browser
Style technisch hervorgehoben. SHJS nutzt die Sprachdefinition von
der GNU Source-Hervorhebung. Dies gibt die Möglichkeit, den
Quellcode zu hervorheben. SHJS unterstützt viele Sprachen, wie
Bison, CC + +, C #, ChangeLog, CSS, Desktop-Dateien, DiffFlex,
GLSL, Haxe, HTML, Java, Java Properties-Dateien, JavaScript,
JavaScript mit DOM, LaTeX. LDAP-Dateien, Log-Dateien, LSM, M4,
Makefile, Objective Caml, Oracle SQL, Pascal, Perl, PHP, Prolog,
Python, RPM spec-Dateien, Ruby, S-Lang, Scala, Shell, SQLSt, andard
ML, Tcl, XML, Xorg-Konfigurationsdateien.
BeautyOfCode Syntax Highlighter ist ein jQuery Plugin. Um das
Plugin zu nutzen, braucht man ein Verweis zu jquery.min.js und
jquery.beautyOfCode.js. Dieses Script unterstützt die neuen
Funktionen wie Smart-Registerkarten, HTML-Scripte,
Zeilenumbrüche und vieles mehr. Dieses Plugin bietet
"state-of-the-art" Syntax-Hervorhebung mit Hilfe von Java-Script.
Das jQuery-Plugin beautyOfCode verwendet um die Syntax Hervorhebung
umzusetzen, den SyntaxHighlighter 2.0 von Alex Gorbatschow. Es
stehen die folgenden Programmiersprachen zur Verfügung:
Actionscript 3, Bash, Shell, ColdFusion ", C, C + +, C #, CSS,
Delphi, Pas, Pascal, Diff, Patch, Erlang, Groovy, Java, Java FX,
Java-Script, Perl, PHP , Power-Shell, Python, Ruby on Rails, Scala,
SQL, TypoScript, MySQL, Virtual Basic,. NET, XML, XSLT, XHTML und
HTML.
Chili ist ein jQuery-Code Syntax-Hervorhebungsplugin. Es
unterstützt viele Programmiersprachen und viele
Konfigurationsoptionen. Es handelt sich um eine sehr schnelle
Hervorhebung, es ist vollständig anpassbar, gründlich
dokumentiert und steht unter der "Mit-Lizenz". Funktioniert im
Internet Explorer, Firefox, Mozilla, Opera und Safari. Es werden
die Programmiersprachen C + +, C #, CSS, Delphi, Java, JavaScript,
LotusScript, MySQL, PHP, XHTML unterstützt und bietet viele
Konfigurationsoptionen - statisch, dynamisch, automatisch, manuell
und Ad-Hoc mit Metaobjects. Mit Chilli kann man selber festlegen,
welche Elemente durch den jQuery-Selektor oder jQuery hervorgehoben
werden. Es unterstützt uneingeschränkt JavaScript,
Reguläre Ausdrücke und sogar
Rückwärtsreferenzen.
Lighter.js ist ein kostenloser Syntax-Hervorheber. Es wurde mit
MooTools entwickelt und nutzt viele der Framework-Funktionen. Mit
Lighter.js geht es einfach ein einzelnes Script auf die Webseite zu
integrieren. Man muss nur die Elemente auswählen, die man
hervorheben will - und Lighter.js kümmert sich um den Rest.
Weil das Programm in MooTools geschrieben worden ist, benötigt
es die Version 1.2.1 +. Es ermöglicht die Ausgabe in
unterschiedlichen Formaten wie geordnete Listen und Tabellen. Man
kann einfach die Darstellungsmethode auswählen, die einem am
besten passt.
Highlights.js hebt Syntax in Code-Beispiele auf Blogs, Foren und
eigentlich auf der beliebigen Webseite hervor. Es ist sehr einfach
zu bedienen, weil es automatisch funktioniert: es findet
Codeblöcke, erkennt eine Sprache und hebt es hervor. Das ist
nicht nur bequem, sondern ermöglicht auch Code-Beispiele
hervorzuheben, die mit den Schreibweisen wie Markdown markiert
sind, wo man keine Möglichkeit hat, die CSS-Klasse leicht
anzugeben. Das Framework kennt 35 Programmiersprachen.
DIHighlight ist eine einfache Syntax-Hervorhebung, die nur 4
Programmiersprachen unterstützt: JavaScript, CSS, XML und
HTML. Man kann die Leerzeichen in Strings darstellen. Die
Funktionsnamen werden fett markiert (bekommen "defun" Klasse). Die
hash-Schlüssel werden mit einem anderen Stil gefärbt. Man
kann, je nach Konzept, auch die anderen Stile erhalten. Wenn der
Wert eine Funktion ist, wird der Name des Schlüssels fett
markiert.
Google Code Prettify ist ein JavaScript-Modul mit CSS, die die
Syntax-Hervorhebung von Quelltext in einer HTML-Seite
ermöglicht. Es funktioniert in HTML-Seiten, auch wenn Code
eingebettete Links oder Zeilennummern enthalten sind. Es
benötigt kein herunterladen und die Seite wird nicht
während der Ausführung blockiert. Man kann die Designs
via CSS anpassen. Das Modul unterstützt alle C-ähnliche,
Bash-ähnliche und XML-ähnliche Sprachen. Man kann es am
besten mit einer guten Cross-Browser-Unterstützung verwenden.
Entwickler und Designer können dazu noch an der Entwicklung
teilnehmen.
JUSH (JavaScript-Syntax Hervorheber) kann man für
Client-seitige Syntax-Hervorhebung in den folgenden Sprachen
verwenden: HTML, CSS, JavaScript, config PHP, SQL, HTTP und
SMTP-Protokoll, php.ini und Apache. Jush ist auch als jQuery und
WordPress-Plugin verfügbar. Die Hervorhebungen von Sprachen,
werden ineinander eingebettet. Man findet auf der Homepage eine
Dokumentation für alle Sprachen. Es erkennt komplette
PHP-Syntax, einschließlich __halt_compiler und heredoc. Es
funktioniert in allen gängigen Browsern wie Internet Explorer,
Firefox, Opera und Google Chrome.
Persönliches Fazit: Nach dem ich mir nun in den
letzten paar Tagen neun unterschiedliche JavaScript Frameworks
angesehen habe, bin ich am meisten von beautyOfCode überzeugt. Dieses Plugin ist
sehr einfach einzurichten und der Sourcecode sieht am besten
aus.
Kennt ihr noch irgend ein JavaScript Framework, welches den
Sourcecode hervorheben kann? Wenn ja, so gebt mir Bescheid via
Kommentar und ich erweitere diesen Beitrag.
