Snippets of Code
Adding syntax highlighting into Tumblr

After much googling around, I found two popular ways to add syntax highlighting into Tumblr:

  1. Alex Gorbachev’s Syntax Highlighter
  2. Google’s Prettify

I tried the Syntax Highlighter at first and spent a really long time trying to get it to work. When it finally did, it slowed the loading time by a huge amount, so I switched to the Prettify.

Prettify was a lot simplier to install. The code below automatically adds the prettyprint class to any <code> tag. Alternatively, you can leave out the script and add the class manually.

<!-- For Syntax Highlighting -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"></link>  
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>  
<script>
    function styleCode() {
        if (typeof disableStyleCode != 'undefined') { return; }

        var a = false;
        
        $('code').each(function() {
            if (!$(this).hasClass('prettyprint')) {
                $(this).addClass('prettyprint');
                a = true;
            }
        });

        if (a) { prettyPrint(); } 
    }

    $(function() {styleCode();});
</script>

This assumes you don’t already have jQuery.

When posting code, use a text editor to change all the angle brackets to &lt; and &gt; and enclose it in <pre><code></code></pre> tags. The <pre></pre> is necessary to keep the formatting.

Note: The highlighting won’t show up in RSS feeds or the dashboard.

  1. lam-bao reblogged this from snippets-of-code
  2. neetpiq reblogged this from snippets-of-code
  3. tewei reblogged this from snippets-of-code
  4. ctrl-issues reblogged this from snippets-of-code
  5. raysandlazors reblogged this from weeklygame and added:
    I just used this on my blog, it looks amazing :D preload: function() { this.game.load.spritesheet('tileset',...
  6. enrails reblogged this from snippets-of-code
  7. tingham reblogged this from snippets-of-code and added:
    Rejoice! The Prettifier still works as you can now see on all of my code samples.
  8. bultas reblogged this from snippets-of-code
  9. afrobambacar reblogged this from snippets-of-code
  10. weeklygame reblogged this from snippets-of-code and added:
    I followed this walkthrough to add syntax highlighting to WGP. I also used the following CSS from Solarized Dark for the...
  11. tivv reblogged this from snippets-of-code and added:
    As I am going to post code blocks here, I will try to use this hint to enable pretty formatting
  12. raegon reblogged this from snippets-of-code and added:
    텀블러에 Google Prettify 적용하는 방법
  13. systemerror51 reblogged this from snippets-of-code and added:
    Interesting.
  14. jjuakim reblogged this from snippets-of-code