#prettify.js

See, block-syntax-highlighted code on the website version:

def async W(pgconnection): ...

and inline mathjax:

$$prod_i^n\prod_j w_{ij}\phi_i\phi_j $$

$\mathbf{W}$ next to text

I just needed two scripts in my theme source:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

In your Tumblr dashboard, click on Customize > Edit HTML, add the following javascript/css links in your head tag:

<!-- For Syntax Highlighting --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css"></link> <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script> <script> function styleCode() { if (typeof disableStyleCode != 'undefined') { return; } var a = false; $('pre').each(function() { if (!$(this).hasClass('prettyprint')) { $(this).addClass('prettyprint'); a = true; } }); if (a) { prettyPrint(); } } $(function() {styleCode();}); </script>

Again, in your Tumblr dashboard, click on Customize, go to the advanced options and in the “Add custom CSS” text field, add the following:

/* Pretty printing styles. Used with prettify.js. */ /* Vim sunburst theme by David Leibovic */ pre .str, code .str { color: #65B042; } /* string - green */ pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ pre .typ, code .typ { color: #89bdff; } /* type - light blue */ pre .lit, code .lit { color: #3387CC; } /* literal - blue */ pre .pun, code .pun { color: #fff; } /* punctuation - white */ pre .pln, code .pln { color: #fff; } /* plaintext - white */ pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ pre.prettyprint, code.prettyprint { background-color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; } pre.prettyprint { width: 95%; margin: 1em auto; padding: 1em !important; white-space: pre-wrap; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } @media print { pre .str, code .str { color: #060; } pre .kwd, code .kwd { color: #006; font-weight: bold; } pre .com, code .com { color: #600; font-style: italic; } pre .typ, code .typ { color: #404; font-weight: bold; } pre .lit, code .lit { color: #044; } pre .pun, code .pun { color: #440; } pre .pln, code .pln { color: #000; } pre .tag, code .tag { color: #006; font-weight: bold; } pre .atn, code .atn { color: #404; } pre .atv, code .atv { color: #060; } }

Well to anyone who knows me knows that I have written quite a few blog engines and spooled up a number of my "own blogs" which after a period of time I get annoyed with and take down.   I won't make any lofty promises that this won't be any different HOWEVER we shall give it a spin.  First and foremost.. Google Prettify, lets kick the tires and see how well this works.  I'm not going to say this will all be about code but a LARGE chunk of it will be.  Just like my life, a significant portion of my day is spent on a keyboard for both work and fun.

Another thing I will give props to Tumblr for is giving us the capability of re-pointing a domain at their servers or even a sub-domain without using domain masking.  Pretty neat feature.  I have also heard that this RTE isn't entirely pointless for search targeting so I guess we shall see on that front as well. So lets get this first post out of the way and onto bigger and better things.  I might do a few short ones on intro tips and tricks with JavaScript and JQuery to get things rolling.  I did open up the "You'll get trolled" anonymous posts, so if you want a topic feel free to hit me up!  If you tell me who you are I'll even publicly thank you for the request! 

So lets get started right and put some code in this post.

Prettify Your Code on Tumblr

1) Go to Customize Your Layout

2) Click the teeny tiny "edit html" link

3) Smile because their layout editor actually doesn't suck

4) Put the code below into your blog and follow the instructions in comments

NOTE:  Remember to update the paths to the prettify.css and prettify.js files to the static file links for your tumblr account.  After enough of us put this in our blog they'll likely add hard paths for us to use but until then... Modify the URL's!!! 

<!-- We can't do anything without JQuery right? --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!-- Download the following from http://code.google.com/p/google-code-prettify/ --> <script src="prettify.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="prettify.css" /> <script type="text/javascript"> $(function(){ //The below line makes the magic happen prettyPrint(); }); </script>

Now the crappy part is after you make these changes through the very nice and robust layout editor when you go to make your first "syntax pretty" post you have to go into HTML mode.  Unlike their awesome layout editor that allows tabbing and has rudimentary syntax highlighting their HTML editor for a blog post does not.  Suffer through it as will I.. and shortly I'll build a plug-in for their RTE if one isn't already out there.

To post an entry with pretty print capabilities you can use a <code class="prettyprint">...</code> or <pre class="prettyprint">...</pre> tag.  

If you already use Markdown as your editor for tumblr, all you have to do is indent your code by 4 spaces, or a tab character, and Markdown will surround it with