Simple Step to Create a Slicker Site

In my last few posts I had been skimping on a great deal of procedural details and presented only on some fun results. This could be blamed on my dwindling resources of free time and my compulsion to make things presentable. These reasons are significant hurdles to blogging about a semi-programming language like Mathematica, a document markup language like LaTeX, or intermediate-level languages like C++. Other than displaying these codes as plaintext or a cropped screenshot, there are few efficient options to posting them and even fewer to display the code's syntax in a manner that would fit a personalized blog design on Blogger.

A fantastic solution to this problem is the combined use of google-code-prettify and SyntaxHighlighter. The setup of these JavaScripts on Blogger is quite simple, the configurations are limitless, and the results are visually appealing.

For example, if I wanted to write a quick crazy mathematica post on how to gather all the historical drawings for the Mega Millions lottery. It would've taken me some time to create a Blogger-ready-sized png picture of the code to upload to Blogger and it would've annoyed my blog readers because they would have to manually type out the code below.

Using google-code-prettify I can copy and paste my code in nanoseconds and my readers would also be able to use the code to pick their winning Mega Millions numbers right away.

dat[x_] := 
 Drop[Drop[
   Flatten[Import[
     "http://www.usamega.com/mega-millions-history.asp?p=" <> 
      ToString[x] <> "", "Data"], 4], 5], -3]
n = 61;
dat1 = ToString[Flatten[dat[#] & /@ Range[n], 1]];
data = ToExpression[
   StringReplace[dat1, {"\[CenterDot]" -> ",", "+" -> ","}]];
number1 = data[[All, 4]];
number2 = data[[All, 5]];
number3 = data[[All, 6]];
number4 = data[[All, 7]];
number5 = data[[All, 8]];
megaball = data[[All, 9]];

To get google-code-prettify set up on Blogger, you will need a free DropBox or box account and the three files I provide here. The lang-mma.js and prettify.css files I have provided for this post were forked from the Mathematica - Stack Exchange. Then follow these steps:

1. Place the uncompressed files anywhere in your preferred cloud drive account.


2. Get the sharable hyperlinks of those three files.


3. In Blogger (with the new 2012 interface) go to the Template tab on the left, then navigate to the Edit HTML button and proceed.


4. Copy and paste the following code into your HTML template (best spot would be right before </head>) and insert the appropriate links in step 2 and save.

<link href='INSERT LINK TO prettify.css' rel='stylesheet' type='text/css'/> <script language='javascript' src='INSERT LINK TO prettify.js' type='text/javascript'/> <script language='javascript' src='INSERT LINK TO lang-mma.js' type='text/javascript'/> <script type='text/javascript'> document.addEventListener('DOMContentLoaded',function() { prettyPrint(); }); </script>
You can now use the script to create Mathematica styled syntax in a Blogger post by using the tag name "pre" and the "prettyprint" class in the HTML code of a Blogger post. Try it out with the Mega Millions Mathematica code from above.

<pre class="prettyprint lang-mma"> <!--Paste Mathematica code here--> </pre>
As seen on his post for other languages, I prefer to use SyntaxHighlighter over google-code-prettify. The instructions on how to setup and use SyntaxHighlighter on Blogger can be found here, so I will not be covering it - unless requested. You can find all the files used for this post here. Happy Blogging Everyone!