Lets admit it, code and Tumblr don’t exactly get along right now. Sure you can write your posts in markdown, but there isn’t really an out of the box experience for syntax highlighting in code blocks.

In the past I’ve resorted to using Gists to store code in my blog, but this can be a hassle to manage, especially if you need to modify your code later. One day I noticed that one of my favorite blogs The Changelog has great code highlighting on their Tumblr blog. With a little view source-ing and a little googling I eventually found out that the best way to add code highlighting to your blog is through a javascript library called prettify.js. I followed these directions by blairvanderhoof, and came up with something not too bad. While his instructions are good, I made a few modifications. Lets take a look.

  1. Link to the prettify.js CDN in your html, by customizing and putting this in right before the<body> tag:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
    
  2. Add the ‘prettyprint’ class to all <pre> tags that contain a <code> tag. Then initialize the prettyPrint() javascript method by adding this in your HTML:

    $(document).ready( function(){
      $('code').parent('pre').addClass('prettyprint');
      prettyPrint();
    });
    
  3. Pick a prettify theme. I chose the Desert theme. Add that style to the Add Custom CSS under the advanced section, or directly to your HTML.

     /* desert scheme ported from vim to google prettify */
    pre { display: block; background-color: #333; overflow:scroll; font-size:12px;  }
    pre .nocode { background-color: none; color: #000 }
    pre .str { color: #ffa0a0 } /* string  - pink */
    pre .kwd { color: #f0e68c; font-weight: bold }
    pre .com { color: #87ceeb } /* comment - skyblue */
    pre .typ { color: #98fb98 } /* type    - lightgreen */
    pre .lit { color: #cd5c5c } /* literal - darkred */
    pre .pun { color: #fff }    /* punctuation */
    pre .pln { color: #fff }    /* plaintext */
    pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
    pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
    pre .atv { color: #ffa0a0 } /* attribute value - pink */
    pre .dec { color: #98fb98 } /* decimal         - lightgreen */
    
    /* Specify class=linenums on a pre to get line numbering */
    ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
    li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
    /* Alternate shading for lines */
    li.L1,li.L3,li.L5,li.L7,li.L9 { }
    
    @media print {
      pre { background-color: none }
      pre .str, code .str { color: #060 }
      pre .kwd, code .kwd { color: #006; font-weight: bold }
      pre .com, code .com { color: #600; font-style: italic }
      pre .typ, code .typ { color: #404; font-weight: bold }
      pre .lit, code .lit { color: #044 }
      pre .pun, code .pun { color: #440 }
      pre .pln, code .pln { color: #000 }
      pre .tag, code .tag { color: #006; font-weight: bold }
      pre .atn, code .atn { color: #404 }
      pre .atv, code .atv { color: #060 }
    }
    .content pre code {background-color:inherit; color:inherit}
    .content pre      { padding:1em; margin: 0.5em 0px; }
    

Note: I changed some of the Desert theme to play nice with my existing styles.

If your blog includes code snippets, you owe it to your audience to have good looking and readable syntax highlighting.

If you’re interested in getting started and aren’t already locked into a blogging platform, I recommend trying out Jekyll on Heroku it’s easy to set up and a real hackers blog. You also get syntax highlighting out of the box. Hope this helped & happy blogging.