Syntax Highlighting in den Blog Posts

Damit Code Snippets in den Blog Posts schön dargestellt werden können, ist der Einsatz des SyntaxHighligher Pakets nützlich.

Installation
Bei Blogger.com geht man wie folgt vor. Design > HTML bearbeiten auswählen. Vor dem schliessenden </head> Tag folgenden Code einfügen.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

Und vor dem schliessenden </body> Tag den Highlighter aufrufen.

<script language='javascript'>
    SyntaxHighlighter.all()
</script>

That's it.

Verwendung
Um ein Code Snippet in den Post integrieren zu können, wechselt man in die HTML Ansicht (HTML bearbeiten) und platziert den Code in ein pre-Tag.

<pre class="brush: php">
[code here]
</pre>

Brushes stehen für CSS (brush: css), JavaScript (brush: jscript), HTML und XML (brush: xml), PHP (brush: php), SQL (brush: sql) und viele weitere Sprachen zur Verfügung.

[code here] Encode HTML Entities !
HTML Entities müssen bei z.B. HTML Code umgewandelt werden, da bei der Eingabe von <i>text in italic</i> die Ausgabe text in italic sein wird. Daher müssen < in &lt; und > in &gt; umgewandelt werden. Ein nützliches Tool dafür ist z.B. Encode / Decode HTML Entities.