Dr Nic

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:

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

Related posts:

  1. Dr Nic’s Tumblelog Everyday I have 100s of blog articles to read [Ed:...
  2. Debugging Javascript in IE7 – how to clear your Javascript cache JavaScript first appeared in December 1995 within the Netscape browser....

21 Responses to “Syntax Highlighting in Tumblr”

  1. Dan Webb says:

    Heh, nice work.

  2. Dr Nic says:

    @dan – I was being really lazy when I stole your examples to boot :)

  3. [...] Original post by Dr Nic and software by Elliott [...]

  4. Peter Cooper says:

    Heh, I went there only to try and comment on the wackiness that is “if !@params[:key].nil?” and then discovered lack of comments :)

    (For whoever does own that code, “if @params[:key]” == “if !@params[:key].nil?”)

  5. Dr Nic says:

    @peter – that’s another request I’ve put in to Tumblr – comments. Some tumbleloggers don’t think comments should be included. I differ. I like tumblelogs because they have nice forms for each different type of article content – quotes, conversations, video, photos, etc. Comments are part and parcel of any live web content, I think.

  6. [...] Some new things before the weekend Posted March 9, 2007 First off, if you haven’t seen it yet, check out Nic Williams‘ wicked Tumblr Syntax Highlighting hack. Nic, you’re our hero! [...]

  7. Tumblr 一些新功能…

    其實是從開發者的blog上介紹的。 Syntax Highlighting in Tumblr讓tumblr上的程式碼更整潔美觀。 Tumblr API釋出,但是不完整,write的部份還在測試。 版型新增“Litewire“ 引言(quote)長度分三種,短、中…

  8. Kyle Maxwell says:

    Re comments:

    You could always use reddit, etc like:
    http://www.kylemaxwell.com/post/344251

  9. [...] [TUMBLR] Syntax Highlighting in Tumblr (drnicwilliams.com, 12 saves) [...]

  10. Tumblelog says:

    [...] Wenn ihr auch Interesse an so einem leicht zu pflegenden Tumble-Dingen habt, guckt euch Tumblr mal an, die Jungs und Mädchen machen das wirklich ziemlich gut und bieten unter anderem eigene URLs und ein sehr gutes Bookmarklet an. Für Coder dürfte ausserdem Dr Nics Syntax Highlighting Hack interessant sein, der macht dann nämlich das Code sehr schick ausschaut. [...]

  11. Jasonm says:

    It looks like Tumblr suppresses the use of class=”" attributes in html now!

    http://lentilpraxis.tumblr.com/post/3896439

  12. Henrik N says:

    @Jasonm [via] – Perhaps you need to uncheck “Filter HTML” in your settings?

    @Dr Nic [via] – I implemented this as well (independently, before I saw this), also using Dan’s highlighting: http://henrik.nyh.se/tumble/ I’d have to say I find my black background more tumbly than your white – makes the content pop out.

  13. Andrea says:

    Respect for Dan Webb (and Dean Edwards)

    You may be interested in Chili (http://noteslog.com/chili/), which at version 1.0 was based on CodeHighlighter 0.4

  14. [...] Extras: Syntax Highlight: para colorir código no tumblelog; Tumblr Hacks, um blog cheio de dicas bacanas e FEEDJIT, um sistema para descobrir de onde vem seus usuários. var oldtitle = document.title; document.title = ‘leonardofaria.net // weblab // Upgrade em seu Tumblelog’; [...]

  15. engtech says:

    How does Webb’s hilighter compare to this one: http://code.google.com/p/syntaxhighlighter/

    That’s the one I’ve been using. Anyone tried both and picked a preference?

  16. engtech says:

    These are the up-to-date instructions on how to get the ability to include class=”ruby” in code blocks, you need to

    Dashboard >> Account >> Preferences

    and then

    Edit using plain text / html

    Save settings

  17. Dr Nic says:

    @engtech [via] – looks like it supports more language syntaxes than Dan’s version.

  18. [...] give you the raw … Cheat Codes ? Syntax Highlighting in tumblr Thu, 08 Mar 2007 18:36:25 UTC …http://drnicwilliams.com/2007/03/08/syntax-highlighting-in-tumblr/A Rough Guide to the excellent Tumblr Speckyboy – WordPress and DesignYou need a little bit of CSS [...]

  19. Alan says:

    I just got syntax highlighting going in Tumblr using SHJS, a highlighter based on GNU Source-highlight that (theoretically) supports 25+ flavors of source code, and is pretty easily themable with CSS of your choosing. Here’s a write-up: http://alan.dipert.org/post/55814908/shjs-javascript-syntax-highlighting-for-tumblr

  20. Peter says:

    Nice. http://sjntax.com is the syntax highlighter I love :)

  21. Dr Nic says:

    @Peter – sjntax.com looks to solve a different problem; how does it dynamically syntax highlight content in my blog/site?