Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

February 22, 2015

Using Code Formatter for Blogger

Wordpress have a <code> tag to wrap code segments, but this is not so in blogger. So when I migrated from wordpress to blogger, all the formatting and syntax highlighting had to be redone.

I used SyntaxHighlighter [1] for this.

Step 1 :

First step is to add required css and javascript to the blogger template. So whatever template you have chosen, go to your Blogger Home > Template > Edit HTML

Step 2 :

Add the following within <head> tag

<!-- BEGIN SyntaxHighlighter BEGIN -->

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>

    SyntaxHighlighter.config.bloggerMode = true;

    SyntaxHighlighter.all();

 </script>

<!-- END SyntaxHighlighter END -->


Step 3 : Writing blog posts

In your blog posts, go to HTML view and wrap all your code segments with a <pre> tag as below,

<pre class="brush:java">

System.out.println ("Using Syntax Highlighter");

</pre>

Below is the real preview of the above:

System.out.println ("Using Syntax Highlighter");
For more info on SyntaxHighlighter configurations, visit [2]

Reference :
  1. http://alexgorbatchev.com/SyntaxHighlighter/
  2. http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
  3. http://patrickwebster.blogspot.com/2009/02/syntaxhighlighter-in-blogger.html