#prettify.js

[yetanothergeographer]

I guess I have code and math working now

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>

So now I can delete that folder where I started to move my blog to pelican. don’t tell staff please

[botmarks]

How to get syntax highlighting in your Tumblr posts

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; } }

This was a slightly updated version largely inspired from this.

[aquamoogle]

Tumblr Over A Custom Blog Site

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.  

Also remember all instances of < you have to manually turn into < and all instances of > you have to manually turn into > or it'll just post as straight HTML and you won't see any of your code in the post!  Oh No!   Ok this post is complete I think and it's time to move onto other things for the night!  Until next time! 

[funcyeahcompsci-blog]

hey, i saw you added code to your posts. how do you do that?

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

If you want to learn about the syntax highlighting, see this post I made earlier about how I got it working, and check the source code to my blog to get an idea of how I implemented it (and what I changed).