Syntax Highlighting in Tumblr

Dr Nic — Thu, 08 Mar 2007 13:53:49 +0000

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 section, insert these two lines of html

This gives you support for Ruby, Javascript, CSS and HTML. To activate this for any

 or  block then merely assign a class of ruby, javascript, css or html to a  wrapper.


For example, to set Javascript syntax in a 
 you still  need to include a  inside:
function foo() {
  return "Dr Nic";
}


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  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*


Related posts:
Dr Nic’s Tumblelog Everyday I have 100s of blog articles to read [Ed:...

Dr Nic » Tumblr

Syntax Highlighting in Tumblr

Can I change the highlighting?

Can I support more languages?

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