Sunday, 2008-11-16

» How to Enable Syntax Highlighting in Tumblr

How to Enable Syntax Highlighting in Tumblr

It’s alwasy nicer to read code snippets with a proper syntax highlighting but unfortunately Tumblr, although used by many code monkeys, doesn’t support this. It is however pretty simple to add syntax highlighting to Tumblr. All you need is a Javascript library (you have several to choose from) and a bit of Tumblr template editing. You of course also need a web host for these additional Javascript and CSS files.

Prerequisites

Web host for a few additional Javascript and CSS files. You cannot upload files to Tumblr.
Custom Tumblr template. You need to add a few lines of HTML code into your template.

SHJS - Syntax Highlighting in JavaScript

From all the alternatives Google found for me my choice was SHJS. It seemed simple enough.

1. Install SHJS

Just upload the SHJS files to your web host.

2. Edit Your Template

SHJS requires one main Javascript file plus one for each syntax you want to use. In the example only PHP syntax is loaded. You also need to load a CSS file. And the final thing to add is the onload call to body.

<head>
  ...
  <script type="text/javascript" 
    src="http://mydomain.tld/blog_resources/sh_main.js"></script>
  <script type="text/javascript" 
    src="http://mydomain.tld/blog_resources/lang/sh_php.js"></script>
  <link type="text/css" rel="stylesheet" 
    href="http://mydomain.tld/blog_resources/css/sh_nedit.css">
</head>
<body onload="sh_highlightDocument();">

3. Start Showing off Your Mad Coding Skilz

SHJS automatically parses code wrapped inside <pre>. Use special class identifiers to tell it what syntax highlighting to use. Refer to SHJS documentation for available syntaxes/class names.

<pre class="sh_php">
  $foo = new MyClass('string', array(123, 456));
</pre>