How to add code/syntax coloring to Tumblr?
The first problem I faced after creating my Tumblr Blog was lack of native source code syntax highlighting. To be honest I was not quite surprised as not everyone is a programmer right?
I have used well known and documented solution - Prettify. and slightly modified code found on the Internet.
First of all locate theĀ header section in your theme and add the necessary scripts. TheĀ first line (jQuery) is only necessary if your Theme do not use it already. Note also the skin variable. I am using sunburst but you can choose your own in the skin gallery.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>
Next add the below code also to your header section. Its purpose is really simple - find all preĀ tags and add prettyprint class as it is necessary to apply the highlighting.Ā
<script> function Highlight() { $('pre').each(function() { if (!$(this).hasClass('prettyprint')) { $(this).addClass('prettyprint'); } }); } $(function() { Highlight(); }); </script>