matt.cc - Code Post Type

Code Post Type

This is a feature I was wondering about since the begining of Tumblr, but never came to be, so I figured why not add it in myself. This is based on an idea by Cameron and makes use of highlight.js.

For the styling of these code post types, you can get as in depth as you’d like. For my tumblr, I’m just going to add a little graphic next to the header of my Text posts. I started with a quick edit to my text post classes using TagAsClasses. TagAsClasses will allow you to restyle posts based on tags added under Advanced options.

<div class="post {TagsAsClasses}">

I’m going to use the tag “code” to create code posts. Because I’m using the tag “code” I added this line of CSS:

div.code h3{background:url("http://pixelspread.com/tumblr/tumblus/code.png") no-repeat;padding-left:15px;}

Next I’ll add a the highlight.js code so my code will show syntax highlighting

<link rel="stylesheet" title="Default" href="http://pixelspread.com/tumblr/tumblus/highlight.css">
<script type="text/javascript" src="http://pixelspread.com/tumblr/tumblus/highlight.js"></script>
<script type="text/javascript"> hljs.initHighlightingOnLoad();</script>

Now anything I wrap in

<pre><code> </code></pre>

will automatically be detected and highlighted. Hightlight.js includes support for: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, C#, Lisp, RenderMan (RSL and RIB), Maya Embedded Language, SQL, SmallTalk, Axapta, 1C, Ini, Diff, DOS .bat, Bash.

Like I mentioned before, you can get as in depth with the styling of the post type as you’d like. For example, if I wanted to add code posts to the Obama theme, I’d be able to use this method to create a whole new icon for the code post type. Anyway, hope you find this useful.

Nov 01 2008 at 12:07:00 PM 4 Notes tags: article code personal feed