Syntax Highlighting in Tumblr

Posted by Dr Nic on March 08, 2007 and blessed with 21 comments

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....
Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

  1. Dan Webb Thu, 08 Mar 2007 16:10:54 UTC

    Heh, nice work.

  2. Dr Nic Thu, 08 Mar 2007 16:11:57 UTC

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

  3. Cheat Codes » Syntax Highlighting in Tumblr Thu, 08 Mar 2007 18:36:25 UTC

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

  4. Peter Cooper Thu, 08 Mar 2007 18:50:55 UTC

    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 Thu, 08 Mar 2007 19:36:44 UTC

    @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 « Davidville Fri, 09 Mar 2007 22:02:28 UTC

    [...] 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. 異想天開 Mon, 19 Mar 2007 19:07:13 UTC

    Tumblr 一些新功能…

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

  8. Kyle Maxwell Mon, 26 Mar 2007 05:13:27 UTC

    Re comments:

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

  9. Best of Feeds - 17 links - blogging, blogs, code, blog, google, search « //engtech Sat, 07 Apr 2007 17:56:09 UTC

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

  10. Tumblelog Sun, 08 Apr 2007 11:27:56 UTC

    [...] 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 Wed, 20 Jun 2007 14:08:03 UTC

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

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

  12. Henrik N Thu, 12 Jul 2007 00:16:47 UTC

    @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 Sun, 26 Aug 2007 01:17:41 UTC

    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. leonardofaria.net // weblab // » Upgrade em seu Tumblelog Wed, 24 Oct 2007 05:23:06 UTC

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

  15. engtech Wed, 27 Feb 2008 02:24:33 UTC

    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 Wed, 27 Feb 2008 02:36:13 UTC

    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 Wed, 27 Feb 2008 08:57:41 UTC

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

  18. custom tumblr theme tutorials Fri, 16 May 2008 01:16:25 UTC

    [...] 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 Thu, 23 Oct 2008 07:32:34 UTC

    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 Wed, 12 Nov 2008 05:31:21 UTC

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

  21. Dr Nic Wed, 12 Nov 2008 05:38:12 UTC

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

Comments