Schon seit längerem wollte ich mir einen brauchbaren Syntax Highlighter suchen, der es mit ermöglicht, CodeSchnipsel in einem WordPress Artikel ansprechend zu präsentieren. Bisher habe ich immer GitHub benutzt, was mit allerdings nicht so ganz zusagte. Nun habe ich durch Martin zum SyntaxHighlighter Evolved gefunden, den ich euch heute vorstellen möchte.
SyntaxHighlighter Evolved
Viel zu erklären gibt es zu dem Plugin nicht. Das Plugin hebt nach Installation den gewünschten Code hervor. Folgende Sprachen werden unterstützt:
- actionscript3
- bash
- coldfusion
- cpp
- csharp
- css
- delphi
- erlang
- fsharp
- diff
- groovy
- javascript
- java
- javafx
- matlab (keywords only)
- objc
- perl
- php
- text
- powershell
- python
- r
- ruby
- scala
- sql
- vb
- xml
Zudem lassen sich auch ein paar Einstellungen vornehmen, mit denen man die Ausgabe anpassen kann.
Neben den Einstellungen kann man über Shortcode-Parameter auch noch jeden Codeschnipsel individuell anpassen. Und mehr braucht man dann auch nicht 😉
SyntaxHighlighter in der Praxis
Hier nun noch ein paar Beispiele wie das dann innerhalb von Artikeln aussehen könnte:
HTML
[xml]
<div class="beispiel">
<h3>Beispiel HTML-Code</h3>
<p>
Und ein Beispiel Absatz im HTML-Code. Is klar!
</p>
</div>
[/xml]
CSS
[css]
body{
background: #57677e url("../img/body_bg.png") repeat 0 0;
color: #333;
font-size: 12px;
}
[/css]
PHP
[php]
<?php
echo "Hallo Welt";
?>
[/php]
jquery
[javascript]
$(function () {
doSomething();
});
[/javascript]
That’s it. Für mich momentan der Favorit für WordPress.
Hier geht es zum Plugin.
Guido
Wie gibt man das in den WYSIWYG-Editor ein, und was passiert mit dem Code, wenn man zwichen HTML und WYSIWYG umschaltet? Bei allen mir bisher bekannten Code-Highlightern wird an dem Punkt nämlich die Formatierung komplett zerstört …
Bohn
Einfach z.B. [ php]code[ /php] … ohne Space natürlich 😛
Hat beim mehrfachen ausprobieren bisher ohne Probleme geklappt. Allerdings habe ich es im HTML-Editor geschrieben, aber WYSIWYG geht geht auch. Habe es gerade kurz getestet. Ob es immer funktioniert kann ich dir aber momentan nicht sagen. Dafür habe ich es noch zu wenig genutzt
Marcel
Mein Favorit bleibt weiterhin der Code Colorer, alleine schon weil er auf dem SyntaxHighlighter GeSHi aufbaut. 🙂
Guidos Anmerkung zum Umschalten hab ich noch gar nicht getestet, da ich den WYSIWYG-Editor eigentlich gar nicht nutze. Werde ich bei Gelegenheit mal testen. Wie sieht es in diesem Bezug mit dem SyntaxHighlighter Evolved aus?
Tim
Hast du das hier schon im Einsatz? Sehe den Code derzeit grau, ohne Highlighting.
Ich habe vor kurzem das PlugIn WP-Syntax eingebunden, das sieht dann in etwa so aus.
Die Einbindung erfolgt dann über so einen Code: Code
Bohn
@Marcel, siehe eine Antwort über dir 😉
@Tim, Musst du kurz warten, da funkt leider was dazwischen was dafür sorgt, das der SyntaxHighlighter erst hinterher laden kann (Ist ja JS)
Christian
Guter Artikel. Dann werde ich das Plugin demnächst auchmal ausprobieren, da ich bislang immer an der Darstellung von Code verzweifelt bin. ^^
Hab da bestimmt schon 5 Plugins durch. :-/
Marcel
So, hab es grade nochmal mit dem Plugin Code Colorer und dem Wechsel zwischen HTML- und WYSIWYG-Editor getestet und muss leider sagen, dass dabei die Einrückung verloren geht. Da ich den visuellen Editor aber nicht nutze ist mir das nicht wirklich wichtig.
H.-Peter Pfeufer
Mensch Ralf, hättest einfach mal gefragt. Ich semmel ja nu wirklich genug Quellcode in meine Artikel Aber genau wie Marcel nutze ich dafür den Code Colorer, aus dem selben Grund wie er, die GeSHi-Engine. Und, ganz wichtig, ich bin kein Freund von Syntaxhighlight via JavaScript. Ist das im Browser abgeschaltet, sieht es meist recht eigenwillig aus.
Bohn
Danke euch, werde den Code Colorer auch mal testen. Das mit dem JavaScript ist auch ein Argument. Mal gucken. Man kann sich ja alles mal angucken 😉