Syntax Highlighting auf Blogger

1.) Download des Syntax Highlighters
2.) Upload der Daten, z.B. auf Google-Pages
3.) Dazulinken der wichtigsten Dateien. Dazu wird diese Sektion unterhalb des <header>-Tags eingefügt (XXX mit der Stackadresse ersetzen)

<link href='XXX/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='XXX/shCore.js'/>
<script language='javascript' src='XXX/shBrushJava.js'/>
<script language='javascript' src='XXX/shBrushJScript.js'/>
<script language='javascript' src='XXX/shBrushXml.js'/>
<script language='javascript' src='XXX/shBrushProperties.js'/>
<script language='javascript' src='XXX/shBrushBash.js'/>
<style type='text/css'>
.console {
background-color: black;
color: #ffffff;
font-family: courier;
}
</style>

4.) Letzter Schritt! Aktiviert wird der Highlighter, wenn ihr diesen Code über dem </body>-Tag einfügt

<script language='javascript'>
  dp.SyntaxHighlighter.ClipboardSwf = 'XXX/clipboard.swf'; 
  dp.SyntaxHighlighter.BloggerMode();
  dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

5.) Anwendung: Man muss nun nur noch den Code zwischen den <pre> </pre> einfügen. Es gibt jedoch verschiedene Einstellmöglichkeiten.
Mit Expander (wie im oberen Beispiel):

<pre style="display: none;" name="code" class="javascript:collapse">

Als Consolenoutput:

<pre class="console">
$ Hello World
</pre>

Das Konsolenbeispiel würde dann so aussehen:

$ Hello World