Sunday, March 24, 2013

How to display code in blogger posts

In this post, I'm going to show step by step how to display code nicely in blogger posts using SyntaxHighlighter.

1) First, we need to add the html code below on the head section of our blogger template. To do this, inside blogger:
  • Select Template on the left hand side.
  • Click Edit HTML.
  • Then copy the code below just before the closing head tag (i.e </head>). You can easily find it by using the search box accessing to it with Control+F.

<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/shThemeEclipse.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/shBrushJava.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>

On line 4 and 5 (violet color), I'm loading the syntax template for Java code and XML code, but there are much more like PHP, Perl, SQL,... you can find the complete list here.


2) Now that the blogger template is ready, we need to prepare the code to ensure correct rendering. Basically, we need to HTML escape some characters like right angle brackets, e.g. all < must be replaced with &lt;. To do so, you can use one of the following online tools:

http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php


3) Once you have the code with escaped characters, you can copy it on your blogger post inside <pre> tags. In the title you can choose a title for the code block and in the class you choose the code template to use.

<pre title="here goes a title" class="brush:xml;">
...
</pre>


4) And that's it, here is an example:
<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/shThemeEclipse.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/shBrushJava.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>

12 comments:

  1. Thanks. Good for my future posting.

    ReplyDelete
  2. it's good tool for posting codes and xml data over blogger

    ReplyDelete
  3. Thank you so much...this has been tormenting me for so many days!!

    ReplyDelete
  4. Dear

    your code is working fine in html file but not working in google blogger so what can i do ? i have follow all steps here is my blog url :

    http://easyscript4u.blogspot.in/p/about-us.html

    any body can help me ?

    ReplyDelete
    Replies
    1. its working well in blogger.... I've used it myself... re-check where you put your code... there must be something missing...

      and use the code in HTML MODE... not in COMPOSE mode...

      Delete
  5. Hello Bodar Bbs,

    I have checked your site, and you have to make sure that the 9 lines of code in the step 1 of the post are added at the end of the head section. Right now you put them at the beginning.

    Cheers

    ReplyDelete
  6. Very good written article. It will be beneficial to anybody who utilizes it, including yours truly. Keep up the good work.
    website design

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Thanks a lot, it perfectly works on my page http://www.mediatorcorner.com/2014/05/how-to-create-awesome-sitemap-for.html

    ReplyDelete
  9. Thanks for your valuable posting.I have collect more than information from your website. It is really wonderful blog. please added more than tips. i'm working in Erp Software in india.Here providing very low price and Quality ERP,Cloud ERP, CMS , responsive webdesign and ERP. you have any more than information kindly make me call this number 044-42127512 or send your mail info@excelanto.com.

    ReplyDelete