2011/03/18

Adding syntax highlighting in Blogger

Hey there,
I was unsure whether to post a topic about adding features to blogger, but since I found it a bit confusing and took a while, I decided to make a very short and simple post about it.
Basically you have two options:
I have used both, and, to be honest I'm not sure yet about which one I prefer, so choose yourself. Let's see how to install and use both.

Google code Prettyfier

This is probably the easiest one to install and use, and the results are pretty neat.

Installation

  • Go to Dashboard->Design->Edit Html and using your browser's search functionality find the <\head> string.
  • Just above that string paste the following:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
  • Now search for the <body string in your html template and add the following:
    <body onload='prettyPrint()'>
  • That's it, you are all set, ready to use.
Usage
  • To use, simply surround the text (normally some kind of source) with:



<pre class="prettyprint">
Whatever you want to add goes here...
</pre>
  • Let us see how it works with some real code:


#include <iostream>
using namespace std;
void main()
{
cout << "Hello World!" << endl;
}


EDIT:

After doing some cross-browser testing, I found out that there was a problem in FireFox with Google code prettyfier, for some reason it wouldn't automatically create scroll bars or crop the text when it was too large. After doing some digging and asking here, I fixed it following these instructions:

  • Remove what we did previously, go to Dashboard->Desing and edit Html template
  • Look for the following code at your template:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
  • Remove that code
  • Save your template 
  • Go to Dashboard -> Design and create a new Widget->HTML/Javascript one
  • Don't put any title on it, we will just use it for styling our post that use google code prettyfier
  • Paste the following code:
<style type="text/css">
.post .prettyprint { 
 border:1px #5C5C5C; 
 background-color:#EDEDED; 
 overflow:auto; 
}
.post .prettyprint ol.linenums li {
 list-style-type:decimal-leading-zero;
}
.post .nocode { 
 background-color:#fff; 
 border-right:1px dotted #666; 
} 
</style>



<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* 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 { background: #eee }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}

</style>

<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js">  </script>
  • You can play with the style properties as much as you want (border, background-color, etc), I used those values but you can use whatever you want, just a matter of taste.
  • The important thing that solves the above issue is the overflow:auto property, that automatically adds scrollbars when needed.
  • You can check this very own post for cross browsing compatibility here to see how this is looking good now mostly in every browser. 

Syntax Highlighter

This one is a bit tricky to make it work and its usage is not as simple as with the previous one, mostly because you have to specify the language you want to highlight. Besides is the one most used, and there is tons of tutorials and information about how to get it working. Anyway, lets get going.

Installation


There two options here, you can download the .css and .js to your host or whetever you can host and access those files OR you can just use the uploaded version of the same files. I opted for the second one, its quicker and you also get the latest version without having to worry about downloading them again. I will explain the second option:

  • Go to Dashboard->Design->Edit HTML
  • Just as before look for the <\head> string in the template HTML
  • Add the following just before the searched string:
<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->
  • That's it, you are ready to go


Usage

There are two options to use Syntax Highlighter, but I will only explain one since I could never make the other one (using the script tag) work. We will use the
tags to use it. The only real difference with the Google Code Prettyfier is that you need to specify the brush to use, that is, the language.
  • Surround the text you want to highlight with:


<pre class="brush:X">
Paste your code here...
</pre>
  • Change the X with the language you want to highlight, for a reference on available brushes check this
  • Lets see how it behaves with some code just as before:


#include <iostream>
using namespace std;
void main()
{
cout << "Hello World!" << endl;
}


A final note on escaping your code


Sometimes, what you paste between your <pre></pre> tags, no matter which one of the above methods you are using, you will need to escape the source you put there. The quickest way to do this is visiting this page and escaping your code there.

As I said, I'm not sure which of the above methods I prefer, Syntax HighLighter has line numbers functionality and overall code looks prettier, although in the other hand with Google code prettyfier I don't have to worry about the language, its just paste and run. Don't know, you choose :)

Alex

References

2 comments:

  1. What I hate most about code in Web pages is when you directly copy & paste the code and the line numbers are also copied.

    By the way, with prettyfier you can also include the line numbers.

    ReplyDelete