Mittwoch, 31. August 2011

Code und Syntax highlighting in blogger oder tumbler

Oh, ich sehe grad ich hab ja noch n alten Blogger Account, mal gucken ob ich den nicht dafür verwenden kann meine Snippet Sammlung anzulegen.

Eigentlich wollte ich das ja mit Joomla und ner CCK Komponente machen, aber ich werde der einfach heit halber mal hier starten.

Da ich in diesem Blog also Code Snippets zusammentragen werde, ist das Code highlighting ziemlich essentiell.

Ich bin nach einiger Suche auf Snippet gestoßen, Snippet is a jQuery syntax highlighting Plugin, dass sich relativ einfach einbinden läßt.

jQuery, das Snippet Plugin + Css Datei einfach vor Ende des </head> Tags einfügen

<link href='http://cdn.ucb.org.br/Scripts/snippet/jquery.snippet.css' rel='stylesheet' type='text/css'/> 
<script src='http://cdn.ucb.org.br/Scripts/jquery-1.5.1.js' type='text/javascript'></script> 
<script src='http://cdn.ucb.org.br/Scripts/snippet/jquery.snippet.js' type='text/javascript'></script> 

dahinter und ebenfalls for dem </head> Tag wird noch die Funktion definiert

<script> 
$(document).ready(function(){
$("pre.htmlCode").snippet("html",{style:"emacs",clipboard:"http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf"});
$("pre.styles").snippet("css",{style:"emacs",clipboard:"http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf"});
$("pre.js").snippet("javascript",{style:"emacs",clipboard:"http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf"});
});
</script> 


Mehr zur Funktionsweise auf der Seite steamdev.com/snippet/

Keine Kommentare: