Add Code highlighting to your Tumblr Blog


Prettify as a Tumblr Theme extension

I wrote this extension that will add blog wide code highlighting to your Tumblr theme

I found code online that made this possible but, I didn’t wanted to include the script on every post that I wanted to put some code on it.
And even worse a lot of then include jQuery just to load the script, which is not nescessary, so a lot of waste.
So I wrote this small piece of javascript that work as a extension to any theme, and will only load the prettify library on posts that have code in it.
It also let you configure a few things directly on the customize sidebar of your blog, without modifying code.


Just wrap your code like this on any post:

var foo = "bar"; //hi there!

And it will reder like this

var foo = "bar"; //hi there!

It also works with the markdown editor



You can choose from 5 different Skins to theme your code on the THEME OPTIONS section of your blog.


It supports the following languages by default:

bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl.

You can load more languages using the text input on THEME OPTIONS section. Type the language file extension separated by comma or space:

Other languages are supported via extensions:

Apollo Basic Clojure CSS Dart Erlang Go Haskell Lisp, Scheme Llvm Lua Matlab MLs:F#, Ocaml,SML Mumps Nemerle Pascal Protocol buffers R, S RD Scala SQL TCL Latek Visual Basic CHDL Wiki XQ YAML

More info about the prettify library can be found here:

Just don’t forget to scape HTML tags like <script><style><div> so they don’t get interpreted by the browser. Replace < and > with &lt; and &gt;

How to add this to your Tumblr

  1. Go to your blog configurations on Edit Appearance, then click on Edit Theme
  2. then click on Edit HTML button
  3. Use ⌘+F or Ctrl+F to localize the </head> tag and insert the following code right before it.

Copy this code

<!-- Prettify Extension for Tumblr - by -->
<meta name="if:Prettify Enable Code Highlighting" content="0"/>
<meta name="select:Prettify Theme" content="default" title="Default">
<meta name="select:Prettify Theme" content="desert" title="Desert">
<meta name="select:Prettify Theme" content="sunburst" title="Sunburst">
<meta name="select:Prettify Theme" content="sons-of-obsidian" title="Sons-Of-Obsidian">
<meta name="select:Prettify Theme" content="doxy" title="Doxy">
<meta name="text:Prettify Language Extension" content="css"/>
var prettify_skin = "{select:Prettify Theme}";
var prettify_langs = "{text:Prettify Extesion Languages}".trim().split(/[\s,]+/);
/** Load prettify when theres a <pre><code></code></pre> on the page */
(function(fn){var d=document; (d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();})(function(){
  var codes = document.querySelectorAll('pre code');
    if(console) console.log("Enabling Prettify to highlight code");, function(el, i){
    var langs = prettify_langs.join("&lang=");
    var args = ["lang="+langs, "skin="+prettify_skin].join("&");
    (function loadScript(url, callback){
      var script = document.createElement('script'),
          scripts = document.getElementsByTagName('script')[0];
      script.src = url;
      if(callback) script.onload = callback;
      scripts.parentNode.insertBefore(script, scripts); 
  1. Hit Save


Adding code to your blog theme

  1. Enable the toggle switch on the side bar
  2. Pick a theme
  3. Save
  4. Enjoy highlighed code anywhere in your blog!

November 24th, 2015 11:21am Tumblr Hacks Javascript