Es existieren bereits einige SyntaxHighligher Plugins für WordPress. Diese sind jedoch alle nicht ganz so komfortabel zu nutzen oder sorgen für lange Ladezeiten, da sehr viele einzelne Javascript Dateien geladen werden. Syntax Highligher ComPress umgeht diese Schwächen:

• NEU: Die Syntax-Dateien (Brushes) werden dynamisch geladen. Es werden nur die Synatx-Dateien geladen, die auch wirklich auf der Seite benötigt werden.
• Quelltext kann ganz einfach über ein Werkzeug in den WordPress Texteditor eingefügt werden, ohne das vorher alle ‘< ‘ escaped werden müssen.

Unterstützte Auszeichnungs- und Programmier-Sprachen sind: AppleScript, ActionScript3, Bash/shell, ColdFusion, C#, C++, CSS, Delphi, Diff, Erlang, Groovy, JavaScript, Java, JavaFX, Perl, PHP, Plain Text, Python, Ruby, Scala, SQL, Visual Basic und XML.

Lokalisiert ist das Plugin für: Deutsch und Englisch

For English Users: Check out the official WordPress plugin website or the ‘readme.txt‘ from the plugin zip-archive. There you can find all information about the plugin in english. If you have questions, feel free to write.

Installation:

Für die Installation wird mindestens WordPress 2.6 benötigt.

1. Entpacke das Archiv und lade den Ordner ‘syntax-highlighter-compress‘ in deinen ‘wp-content/plugins/‘ Ordner.
2. Aktiviere das Plugin, indem du dich in das Admin-Menu einloggst und dort unter ‘Plugins‘ den ‘Aktivieren‘ Link des ‘Syntax Highlighter Compress‘ Plugins klickst.
3. Fertig.

Benutzung:

Code über den TinyMCE Knopf einfügen:

1. Erstelle einen neuen Artikel oder eine neue Seite in WordPress bzw. öffne einen vorhandenen Artikel oder eine vorhandene Seite.
2. Platziere den Schreibcursor an der Stelle in der Textbox, an der du den Code einfügen möchtest.
3. Klicke auf den neuen TinyMCE Knopf, der sind in der Werkzeugleiste befindet (siehe Screenshot).
4. Füge deinen Code in die Textbox von dem Popup ein und stelle über die Dropdown Liste ein, um welchen Syntax es sich handelt.
5. Klicke auf ‘Einfügen‘.
6. Fertig.

TinyMCE Knopf und Popup

Code ohne den TinyMCE Knopf einfügen:

1. Ersetze bei deinem Code alle ‘< ‘ mit ‘&lt;‘. Am besten geht dies in einem Texteditor, der eine Suche und Ersetzen Funktion hat.
2. Schließe deinen Code wie folgt in ein pre Tag ein:

   <pre class="brush:[code-alias]">[Your Code Here]</pre>
   

   Das [code-alias] Segment musst du mit dem entsprechenden Syntax-Alias (Brush) ersetzen. Die Brush-Aliases findest du hier übersichtlich dargestellt. Für PHP Code würde das dann in etwas wie folgt aussehen:

   <pre class="brush:php">
     &lt;?php
       $input = array("Neo", "Morpheus", "Trinity");
       $rand_keys = array_rand($input, 2);
       echo $input[$rand_keys[0]] . "\n";
     ?>
   </pre>
   

3. Füge den fertig aufbereiteten Code an der gewünschten Stelle in WordPress ein. Achte dabei darauf, dass du dies in der HTML Ansicht machst.
4. Fertig.

Über zusätzliche Parameter, die im pre Tag angegeben werden können, kann die Darstellung noch angepasst werden. Weitere Informationen dazu findest du hier.

Beispiele:

PHP:

function fibonacci($n){
  /*
   * Notice that in PHP, we do not have to declare our variables, nor must we
   * declare their types. Also see how variables in PHP are prefaced with the
   * dollar sign. Other than that, this is identical to the C version of this function.
   */
  $a = 0;
  $b = 1;
  for ($i = 0; $i < $n; $i++){
    printf("%d\n",$a);
    $sum = $a+$b;
    $a = $b;
    $b = $sum;
  }
}

JavaScript:

<script language="JavaScript1.3" type="text/javascript">
<!--
function fibonacci() {
  var a,b,s,i;
  a=0;
  b=1;
  s=b+a;
  for (i=2; i < 40; i++){
    document.write("i= " + i + "<br>");
  }
}
-->
</script>

XML:

<addresses>
  <person>
    <name>
      <first>Ingo</first>
      <last>Melzer</last>
    </name>
    <city>Laupheim</city>
    <country>Germany</country>
  </person>
  <person>
    <name>
      <first>Andreas F.</first>
      <last>Borchert</last>
    </name>
    <city>Lonsee</city>
    <country>Germany</country>
  </person>
</addresses>

Frequently Asked Questions:

Q: Mit welchen Browsern funktioniert das Plugin?
A: Das Plugin läuft auf den gängigsten Browsern (IE, Firefox, Chrome, Safari).

Q: Mit welcher WordPress Version ist das Plugin kompatibel?
A: Das Plugin läuft ab der Version 2.6 und wird wohl bis zur Version 3.0 laufen.

Changelog:

Version 3.0.83.2:

• Fehler beim Brush Autoloader Script behoben
• Fehler behoben, der bei leeren Tab-Size Feld im Settingsmenu dazu führte, dass das Plugin nicht richtig lief
• Code aufgeräumt

Version 3.0.83.1:

• Neues Syntax Highlighter Script (Version 3.0.83) wird verwendet
• Dynamisches Brush Loading: nur die auf der Seite benötigten Brush Dateien werden geladen
• Einstellungs-Menü hinzugefügt: Stylesheet kann ausgewählt werden und andere Einstellungen können getroffen werden
• Neue Sprachen im Einfügen-Dialog hinzugefügt

Version 2.1.364.1:

• Erste Version, bisher noch nichts geändert.

Spenden:

Wenn du mit dem Plugin zufrieden bist und mich gerne unterstützen möchtest, bin ich über jede Spende sehr erfreut!

Coda-Slider 2:

Der Coda-Silder ist Dir wahrscheinlich bekannt oder Du bist ihm zumindest schon einmal begegnet. HTML Inhalte können damit in verschiebbaren Tabs präsentiert werden. Der “alte” Coda-Slider wurde bekannt durch die Panic Coda Website.

Da der Coda-Slider bisher doch recht unflexibel war, wurde das Plugin nun endlich überarbeitet. Neue Features sind:

• automatischer Tab-Wechsel solange bis auf ein Tab geklickt wird
• Tab-Wechsel kann von anderen Links aus kontrolliert werden
• ein Tab kann angegeben werden, der nach dem Laden der Seite angezeigt werden soll
• Geschwindigkeit und Animationen können bestimmt werden
• Für jeden Tab werden SEO freundliche URLs erzeugt

Grundlayout des neuen Coda-Slider 2

Den Download und eine Demonstration des neuen Coda-Slides findest Du hier.

Before/After:

Das Before/After Plugin für jQuery ist besonders für Webseiten zu empfehlen die einen Vergleich von Bildern präsentieren wollen. Das ursprüngliche Bild und die überarbeitete Version davon können über einen Schieberegler im Vorher- und Nachher-Vergleich betrachtet werden.

Vorher-/ Nachher-Vergleich eines Bildes

Den Download und wie das Ganze aussieht, findest du auf der Catch my Fame Seite.

TopUp:

TopUp ist ein Lightbox Klon, der stark anpassbar ist und erweiterte Funktionen mit sich bringt. Bilder, Videos, Webseiten und HTML Inhalte können dargestellt werden. Natürlich werden auch Gruppierungen unterstützt, so das über Vor- und Zurück-Knöpfe innerhalb der Lightbox die Inhalte gewechselt werden können. Desweiteren sind Ajax Requerst möglich und die Animationen können verändert werden.

TopUp Lightbox

Den Download und eine Demonstration gibt es hier.

Phantasm ist leider nicht kostenlos, ist aber auf jeden Fall ein überlegung wert, wenn man viel mit dem Erstellen von Vektorgrafiken zu tun hat. Das Plugin gibt es in drei Ausführungen, die sich durch Ihren Funktionsumfang unterscheiden. Die einfachste Version kostet nur um die 37 €.

Da das Plugin mehrere Sprachen unterstützt und ich bei der aktuellen Version (0.2.16) einige Lokalisierungsfehler bei der deutschen Sprache hat, hab ich mich mal dran gesetzt und die Fehler ausgemerzt. Fehler waren hauptsächlich bei den Pluralformen, da die .po/.mo Dateien nicht darauf ausgelegt waren.

Die überarbeitete Version könnt Ihr hier herunterladen. Solltet Ihr noch andere Fehler entdecken, bitte kurz Bescheid geben, damit ich diese auch korrigieren kann.