Tumblr und Syntax Highlighting

Seit Neustem schreibe ich auf meinem Tumblr-Blog. Natürlich hab ich nach einer guten Lösung gesucht Code leserlich und übersichtlich darzustellen.

Beim Googeln nach “Tumblr Code Highlight”, bin ich immer wieder auf Google Prittify gestossen. Mit diesem “Scriptchen” werden Code’s wunderbar dargestellt. Unten habe ich kuurz erklärt, wie ihr Prittify auch auf eurem Blog installieren könnt.

Füge folgenden Code in den Header-Bereich deines Tumblr-Themes ein


<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet"/>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<style>
pre.prettyprint {
	overflow-x: auto;
	margin: 5px 20px 20px;
}
</style>
</head>
<body onload="prettyPrint()">

Danach in deinen Beiträgen folgendes mit deinem Code machen


<pre class="prettyprint">
<code>
<!-- code here -->
</code>
</pre>

Das wärs!

14 Anmerkungen

Anzeigen

  1. von fabschneider gepostet

Blog-Kommentare powered by Disqus