Sunday, May 27, 2012

How to format source code for blogger with SyntaxHighlighter by Alex Gorbatchev

Why Should one format code on their blogs?

Your code in the blog can go from loking like this.....
 public class Test {

    /** Prints "Hello World!" onto the consle */
    public static void main(String[] args) {
      
        String helloWorld = "Hello World!";
      
        System.out.println(helloWorld);
    }

}
TO This.....
public class Test {

 /** Prints "Hello World!" onto the consle */
 public static void main(String[] args) {
  
  String helloWorld = "Hello World!";
  
  System.out.println(helloWorld);
 }

}

Ain't that a looker!!!
All credit goes to Alex Gorbatchev who created the CSS styles for us to use.This is the best formatter out there!
Lets go step by step into integrating this into our blog in blogger:

1. Click on the Edit HTML  in the Templates section of the dashboard

2. Click on Proceed.

3. Search for </head> tag.

 

 4. Copy and paste the following text just above the tag

 


<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 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/shBrushJava.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/shBrushPhp.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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

5.  Click on Preview to check that your blog is not screwed up and save the template.


6. Using the CSS to format your code: 

The code that needs to be formatted must be enclosed within the <pre> tag. If you are formatting java code then :
<pre class="brush:java">
  Awesome java code goes here....
</pre>
Similarly styles for css --> "brush:css", for php --> "brush:php", for html --> "brush:html".
There's one catch though, when you are using "brush:html" blogger might show an error that there's an error with the HTML.In that case go use HTML Escape Tool to convert your HTML code into an escaped format and use this escaped format in between the <pre> tags.
Hope you liked my article. If you did, some comments below will make my day!

9 comments:

  1. Nice post...
    Found a eclipse plugin for eclipse IDE users, to directly copy the code as HTML.

    http://java-sample-program.blogspot.com/2012/12/copy-as-html-eclipse-plugin.html

    ReplyDelete
  2. Hi all, I think SyntaxHighlighter is a good one to format source code. But in the blog, when I use it the first time, it really make my website slower. So I create a script that make it easier and faster. Hope this help to all of you.
    http://www.phamngoctan.com/2013/11/format-source-code-for-blogger.html

    ReplyDelete
  3. try this one also - http://www.webslesson.info/p/online-code-formatter.html

    ReplyDelete
  4. Nice job done by you and its really great website on the google. I like it ,very nice post. Garmin Support Help by clicking on this link get know about me more.

    ReplyDelete
  5. McAfee antivirus may get the user into trouble such as with the installation, reinstallation, uninstalling or the issue can also be related to some technical error code in order to get instant and accurate resolutions for all these issues and errors it is advisable that the user gets connected with the experts at McAfee Contact Number through live chats, Emails or calls.

    ReplyDelete
  6. In order to remove Bullguard antivirus it is advisable to open the uninstall window after that click on “next” further keep the current settings saved if in case you need to reinstall the software. If you still need more information or help then ask for it from the team of trained and certified experts they can be asked for help as and when needed.

    ReplyDelete
  7. This post really helped me a lot as every word is unique and simple so that one can easily understand the topic. This post is written by an experienced writer.How to turn off autoplay on Netflix?

    ReplyDelete
  8. Not a single grammatical error, and not a generic word has been used while writing this post and these things make this post different. The writer has really done a great jobHow to add Google meet to Gmail?

    ReplyDelete