Add Code highlighting to your Tumblr Blog

image

Prettify as a Tumblr Theme extension

I wrote this extension that will add blog wide code highlighting to your Tumblr theme

I found code online that made this possible but, I didn’t wanted to include the script on every post that I wanted to put some code on it.
And even worse a lot of then include jQuery just to load the script, which is not nescessary, so a lot of waste.
So I wrote this small piece of javascript that work as a extension to any theme, and will only load the prettify library on posts that have code in it.
It also let you configure a few things directly on the customize sidebar of your blog, without modifying code.

Usage

Just wrap your code like this on any post:


var foo = "bar"; //hi there!

And it will reder like this

var foo = "bar"; //hi there!

It also works with the markdown editor

Nice!

Skins

You can choose from 5 different Skins to theme your code on the THEME OPTIONS section of your blog.

Languages

It supports the following languages by default:

bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl.

You can load more languages using the text input on THEME OPTIONS section. Type the language file extension separated by comma or space:

Other languages are supported via extensions:

Apollo Basic Clojure CSS Dart Erlang Go Haskell Lisp, Scheme Llvm Lua Matlab MLs:F#, Ocaml,SML Mumps Nemerle Pascal Protocol buffers R, S RD Scala SQL TCL Latek Visual Basic CHDL Wiki XQ YAML

More info about the prettify library can be found here:
https://google-code-prettify.googlecode.com/svn/trunk/README.html

Just don’t forget to scape HTML tags like <script><style><div> so they don’t get interpreted by the browser. Replace < and > with &lt; and &gt;
https://www.htmlescape.net/htmlescape_tool.html


How to add this to your Tumblr

  1. Go to your blog configurations on Edit Appearance, then click on Edit Theme
  2. then click on Edit HTML button
  3. Use ⌘+F or Ctrl+F to localize the </head> tag and insert the following code right before it.

Copy this code

<!-- Prettify Extension for Tumblr - by www.vitim.us -->
<meta name="if:Prettify Enable Code Highlighting" content="0"/>
<meta name="select:Prettify Theme" content="default" title="Default">
<meta name="select:Prettify Theme" content="desert" title="Desert">
<meta name="select:Prettify Theme" content="sunburst" title="Sunburst">
<meta name="select:Prettify Theme" content="sons-of-obsidian" title="Sons-Of-Obsidian">
<meta name="select:Prettify Theme" content="doxy" title="Doxy">
<meta name="text:Prettify Language Extension" content="css"/>
{block:IfPrettifyEnableCodeHighlighting}
<script>
var prettify_skin = "{select:Prettify Theme}";
var prettify_langs = "{text:Prettify Extesion Languages}".trim().split(/[\s,]+/);
/** Load prettify when theres a <pre><code></code></pre> on the page */
(function(fn){var d=document; (d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();})(function(){
  var codes = document.querySelectorAll('pre code');
  if(codes.length){
    if(console) console.log("Enabling Prettify to highlight code");
    Array.prototype.forEach.call(codes, function(el, i){
      el.parentElement.classList.add("prettyprint");
    });
    var langs = prettify_langs.join("&lang=");
    var args = ["lang="+langs, "skin="+prettify_skin].join("&");
    (function loadScript(url, callback){
      var script = document.createElement('script'),
          scripts = document.getElementsByTagName('script')[0];
      script.src = url;
      if(callback) script.onload = callback;
      scripts.parentNode.insertBefore(script, scripts); 
    })("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?"+args);
  }
});
</script>
{/block:IfPrettifyEnableCodeHighlighting}
  1. Hit Save

image

Adding code to your blog theme

  1. Enable the toggle switch on the side bar
  2. Pick a theme
  3. Save
  4. Enjoy highlighed code anywhere in your blog!

November 24th, 2015 11:21am Tumblr Hacks Javascript