Thursday, 27 February 2014

Syntax highlighting of code snippets in Tumblr

In this blog I use Google code prettify for syntax highlighting.

The setup for Tumblr is pretty easy:

  1. Go to your template and choose Edit HTML, right below the <body> tag add:

    <script src=""></script>

    Note: the skin parameter is optional, different skins are available here.

  2. Choose avandced options (at the bottom of the customize pane) and add this under Add Custom CSS

    h4 {
        font-size: 18px;
    pre {
        overflow: auto;
        white-space: pre-wrap;       /* css-3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
    .prettyprint {
        font-size: 10pt;
  3. Wrap your code in a code block

    <pre class="prettyprint"><code>
        ...Some code...

Optional: specify the code language:

<pre class="prettyprint lang-java"> 
    ...Some java code..     

Optional: add line numbers:

<pre class="prettyprint linenums">
    ...Some java code..