nullseite.de Null und Nichtiges

Das WordPress-Plugin wp-syntax ermöglicht Syntax Highlighting von Code-Snippets für eine Vielzahl verschiedener Sprachen. Es bietet allerdings von Haus aus keine “Copy to Clipboard”-Funktionalität, also bspw. einen Link, der den Beispiel-Kode in die Zwischenablage kopiert. Nach ein wenig Recherche zeigt sich schnell, daß das Kopieren auf Knopfdruck in die Zwischenablage aus einem Browser eine nicht ganz triviale Angelegenheit ist; vielleicht der Grund, warum wp-syntax gleich ganz darauf verzichtet?!
   Unter Zuhilfenahme einer kleinen Flash-Applikation, etwas Javascript und ein wenig Frickelei an der wp-syntax.php sowie wp-syntax.css lässt sich die Funktionalität allerdings nachrüsten. Wer die Schritte nicht einzeln nachvollziehen möchte, kann am Ende dieses Artikels das vollständige wp-syntax-Plugin nebst aller Änderungen downloaden. Die nötigen Anpassungen im Detail:

1. wp-syntax.php
   In Funktion wp_syntax_highlight() hinter do_action_ref_array(...) und vor dem if ($line)-Block. Ersetze $output = "\n<div class=\"wp_syntax\">"; durch

   $output = "\n<div class=\"wp_syntax_null\"><div class=\"wp_syntax\">";

   Und $output .= "</div>\n"; hinter dem if ($line)-Block durch

   $output .= "</div><a title=\"copying to clipboard may need flash-player\" style=\"color: #707070;\" href=\"#\" onClick=\"return copyToClipboard(this);\">copy to clipboard</a></div>\n";

   In der Funktion wp_syntax_head() ist vor dem echo-Statement der folgende Block zu ergänzen:

   $js_url = get_bloginfo("wpurl") . "/wp-content/plugins/wp-syntax/wp-syntax.js";
   if (file_exists(TEMPLATEPATH . "/wp-syntax.js"))
   {
     $js_url = get_bloginfo("template_url") . "/wp-syntax.js";
   }
   echo "\n".'<script src="' . $js_url . '" type="text/javascript"></script>'."\n";

2. wp-syntax.css
   Zu Beginn der Datei den folgenden Kode einfügen:

   .wp_syntax_null {
     color: #707070;
     margin: 0 0 1em 0;
     vertical-align: top;
     text-align: right;
     font-size: 9px;
     line-height: 1;
   }

   In der CSS-Definition für .wp_syntax die Formatbeschreibung für margin mit dem folgenden Block überschreiben.

     margin: 1em 0 0 0;
     text-align: left;

3. _clipboard.swf
   Das Eingangs erwähnte Flash-Progrämmchen steht als _clipboard.swf zum Download bereit (Rechtsklick auf den Link, dann Speichern unter). Die Datei ist zwingend mit im wp-syntax-Plugin-Verzeichnis zu speichern.
    
4. wp-syntax.js
   Eine neue Datei. Diese mit folgendem Inhalt befüllen und im selben Verzeichnis wie wp-syntax.php ablegen. Server- und Pfadangabe in Zeile 37 sind den eigenen Gegebenheiten anzupassen.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

   <!-- function copyToClipboard( t ) { // get <pre>-node's innerText|HTML if ( /Firefox/.test( navigator.userAgent ) ) { var tt = t.previousSibling.firstChild.firstChild.innerHTML; tt = tt.replace( /&(lt|gt);/g, function( strMatch, p ) { return (p=="lt")?"<":">"; } ); tt = tt.replace( /<span style[^>]+(>|$)/g, "" ); tt = tt.replace( /<\/span>/g, "" ); } else { var tt = t.previousSibling.firstChild.firstChild.innerText; } // hack to identify and remove leading line numbers var lines = tt.split( "\n" ); if ( lines.length > 1 ) { bailout: while( lines.length ) { var trimmed = lines[ 0 ].replace( /\s+$/g, '' ) ; for ( var j = 0; j < trimmed.length; ++j ) { if ( isNaN( parseInt( trimmed.charAt( j ) ) ) ) { // bail out on first line containing non-digit chars break bailout; } } lines.shift( ); } } text2copy = lines.join( "\n" ); if ( window.clipboardData ) { window.clipboardData.setData( "Text", text2copy ); } else { var f = 'flashcopier'; if ( !document.getElementById( f ) ) { var divholder = document.createElement( 'div' ); divholder.id = f; document.body.appendChild( divholder ); } document.getElementById( f ).innerHTML = ''; var divinfo = '<embed src="http://www.eigener-server.de/wp-content/plugins/wp-syntax/_clipboard.swf" FlashVars="clipboard=' + escape( text2copy ) + '" width="0" height="0" type="application/x-shockwave-flash"></embed>'; document.getElementById( f ).innerHTML = divinfo; } alert( "Text should have been copied to clipboard!\nMay not work with all browsers." ); return false; } -->

Das vollständige wp-syntax-Plugin basierend auf Version 0.9.1 inklusive der hier beschriebenen Ergänzungen steht als wp-syntax.0.9.1-copy2clip.zip (516kB) zum Download bereit.