Publish Source code in Blogger

After posting any source code, First we make sure that the code is correct and same as the original. For HTML or script source code, we require HTML Encoding so that blogger doesn't execute this code.The Source code format should be different from content and there should be option for copy code or print code so that user don't need to select entire code and press ctrl+c. I use "Syntaxhighligher" to display source code in blogger. It fullfills all requirement. First Layout is very pretty with line numbers and it provides "View Plain" (To display only source code in another window),"Copy to clipboard" and "Print?" options. We will see How can we use syntaxhighlighter in blogger without any hosting.

1.In the blogger,Click on Layout tab ->Edit HTML and put following things Before </head>

<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>


2. put following things Before </body>

<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>


3. encode (HTML Encode) your source code. for this, you can use this.
OR

Copy your code in notepad and replace all < in &lt; etc.

4. Put your updated code between:
<pre name="code" class="Cpp">
….My code here…
</pre>

25 comments:

  1. Thanks a lot. There are thousand other blog entries explaining the same stuff. And I only understood yours.

    Thanks.

    ReplyDelete
  2. It never work with me in my blog.
    Could you please explain it step by step?

    ReplyDelete
  3. Thanks for the comment on my blog .net. I'll be sure to try it out when I start publishing some source.

    ReplyDelete
  4. Great post! If you want to escape all of the HTML characters in your code, you can use:
    http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/

    ReplyDelete
  5. For FireFox:
    1. Open following url:
    http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
    2. Copy it
    3. paste with existing styles in Layout-> Edit HTML in blogger.
    4. Remove following line
    <link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

    ReplyDelete
  6. can you tell me what am I doing wrong? I did everything like you said but it doesn't give same result.
    my blog:
    http://alisteroz.blogspot.com

    ReplyDelete
  7. Hi Alisteroz,

    I see this is working on your blog.
    Which browser are you using?
    May be browser or firewall issue, I tested your blog on IE7 and Firefox. On both, It is working fine.

    ReplyDelete
  8. Marvellous.. thanks for this post! Now to try it.. :)

    ReplyDelete
  9. Hmmm.. this didn't work for me. I went here instead and fixed up the broken link tag it works: http://morten.lyhr.dk/2007/12/how-to-get-syntax-highlighting-in.html

    ReplyDelete
  10. Thanks a lot ! It's simple and works :) One question - I've seen project's homepage and there is version 1.5.1 and that one from the trunk is 1.5.2 - do you have somewhere some docs regarding changes/improvements you've introduced ?

    As for example of successful installation:
    http://tech4web.blogspot.com/2008/12/simple-example-of-fish-eye-effect-in.html

    ReplyDelete
  11. Thanks for the post. I use a very simple method, without any installation required.

    http://blog.giladnaor.com/2009/02/source-code-highlighting-in-blogger.html

    ReplyDelete
  12. Could you lend a hand my way? I've been trying to get this to work for an hour and still no luck. I've tried a dozen variations and nothing works.
    http://magicscrollsofcode.blogspot.com/
    and here is a copy of my html
    http://www.megaupload.com/?d=8EK5M6D8

    ReplyDelete
  13. When I paste the code above blogger and click on save I get the message: Your HTML cannot be accepted. What am I doing wrong?

    ReplyDelete
  14. This post was a precious help now that google pages are about to close!

    You rock!

    ReplyDelete
  15. Thanks a lot. It works great.....I tried with lots of blog posts but only this one helped.

    ReplyDelete
  16. Do you have any result screen shoot of this methode?

    ReplyDelete
  17. It is not working in FF the way you include scripts.
    Instead of <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>

    it must be <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'></script>

    and so on for all scrpits includes...

    Hope this helps

    ReplyDelete
  18. Hi,

    Article is flawless with smooth flow and more above all the article is nicely explained.

    ReplyDelete
  19. Hi, this works fine for my blog: http://martin-thoma.blogspot.com/2011/01/how-to-post-code-on-bloggercom.html

    It would be cool if they had a bash-highligter.

    ReplyDelete
  20. visit on a nice blog, i like your post and keep posting,thanks friends

    ReplyDelete
  21. does it work for java code also ? I tried but no success budy :(

    Javin
    Why String is immutable in Java

    ReplyDelete
  22. I didn't do the javascript bit but it seems to works fine for the source code on my blog
    ....or is it? I checked by opened my blog on few different browser and it shows ok

    ReplyDelete
  23. Great info, thanks a lot.
    http://www.andolasoft.com/services/asp.net-application

    ReplyDelete