Pages

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="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></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...
    </code></pre>
    

Optional: specify the code language:

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

Optional: add line numbers:

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

References: