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 < und > in > umgewandelt werden. Ein nützliches Tool dafür ist z.B.
Encode / Decode HTML Entities.