Dr Nic's Tumblr

Syntax Highlighting in Tumblr

I wrote an email to the lovely Tumblr people asking for Syntax Highlighting for code chunks. Several hours passed and they still hadn’t jumped at the chance to appease me with some syntax highlighting.

So I wrote one, and so now all Tumblrers can use it.

See the demo from my tumblr, and in a frame below:

To use this in your own Tumblr (or probably anywhere I guess), do the following:

Go to settings
At the bottom, turn off ‘Use rich text editing’ and ‘Filter HTML’, and save settings.
Go back into settings, and select Custom theme. This will give you the raw html for your previously selected theme
Just above/before the </head><body> section, insert these two lines of html

This gives you support for Ruby, Javascript, CSS and HTML. To activate this for any <pre> or <code> block then merely assign a class of ruby, javascript, css or html to a <code> wrapper.

For example, to set Javascript syntax in a <pre> you still need to include a <code> inside:

<pre><code class="javascript">function foo() {
  return "Dr Nic";
}
</code></pre>

Can I change the highlighting?

Get the styles.css file, change it, post it somewhere (or give it to me with a new name, and I’ll post it here), and change the <link href="...your dir/styles.css"> above.

Can I support more languages?

Grab the four language files (css, ruby, javascript, and html) and slap one together for module-2 if you like. Again, if you want me to host it here, just ping me. Also, email it to Dan Webb so he can add it to his CodeHighlighter project.

“I’m from Tumblr, we’ve just implemented syntax highlighting”

*blank stare*