Adding Syntax Highlighting to Tumblr
We developers have this obsession to write code everywhere. And seeing code as a simple plain text is very disturbing to our eyes. Turns out adding Syntax highlighting to Tumblr is pretty easy. I will be using Google Prettify here to add syntax highlighting.
First, go to your Account icon (right corner) and choose Edit Appearance
Next in the page that comes choose Edit Theme.
From the left pane, choose Edit HTML.
Inside your <head>, add the following javascript,
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
In your <body> tag, add the following, onload="prettyPrint()"
Click Update Preview and Save and you're done!
Integrating Prettify in Tumblr posts
Now that we have added the Prettify JS, we can integrate in our post easily.
Go to the HTML editor by clicking on the settings icon of your blog post
Next, nest your code between <pre class="prettyprint"> and</pre> tag.Please use a text editor and change all > to > and all < to <
#include<iostream> int main() { int i = 5; std::cout<<"hello world"; }
The dashboard view would now display a code block. Don’t fret! Select Preview on Blog option to view your Syntax highlighted changes from the dropdown next to Save draft.
Adding line numbers
If you would like to add line numbers to your code simply add the css class linenums in the <pre> tag. This would add line numbers after every 5 lines. If you want to add line numbers to every line then, add the following css code ( You can add this by giving Edit Theme then selecting Advanced Options and then adding in the Custom CSS option )
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: decimal !important }
Further reading and reference
Google Prettify
http://snippets-of-code.tumblr.com/post/6027484416/adding-syntax-highlighting-into-tumblr
