How to Escape Code in Blogger Blogs

Trying to escape code in blogging software is always an adventure. My experience with Wordpress blogs is that some characters will sneak through the code tags you use, so precautions still need to be taken. This is also the case with escaping code in Blogger, but there's a fairly robust library available to use for the purpose.

Using Syntax Highlighter to Escape Code

The Syntax Highlighter library can either be downloaded from http://alexgorbatchev.com/SyntaxHighlighter/ or you can call it directly from their server. Either way, you'll want to edit your theme and include the following above the closing </head> tag:

<!--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/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-->

Syntax Highlighter Usage and Precautions

• To escape html code, use the following tag: <pre class="brush:html">code goes here</pre>.
• To escape php code, use the following tag: <pre class="brush:php">code goes here</pre>.

Note that if you use the brush:html option, you'll still need to use something to escape your html to escape the html characters (the less than sign, greater than sign and the ampersand need to be escaped so that the html won't get interpreted).

How to Encode Adsense in a BlogSpot Template

If you want to embed Adsense blocks in your theme, then you'll need to encode the Adsense javascript first. Doing so escapes the special characters and makes sure that your Adsense ads will show where you want them.

How To Encode Adsense for BlogSpot Blogs

A typical block of Adsense javascript looks like this:

<script type="text/javascript"><!--
google_ad_client = "pub-0000000000000000";
google_alternate_color = "ffffff";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="0000000000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

When placing Adsense Code into your template, you need to encode some of the html characters:

• < with &lt;
• > with &gt;
• " with &quot;

To do this html encoding, use http://centricle.com/tools/html-entities/ which will do it easily for you. After you get back your encoded Adsense block, you can place it anywhere in your theme file. You can make it float to the right or left so it is flush inline with any elements around it (like body text). To do this, use the following code:

<div style="float: right; margin-right: 5px;">
Insert your parsed AdSense Code from step above.
</div>