Pages

Friday, June 13, 2008

Posting Source Code in Blogger

Finally! I figured that out! you know what I mean, right? Yes... of course you do.

Well, that previous post almost drove me nuts! I clicked on the publish button, quickly previwed the post, and then went to bed.

The next day (i.e. yesterday), I was pleasantly checking my post only to see that all the parts that contain code are a mess!

The culprit? It turned out to be the "less than" or "<" symbol. Obviously, the Google WYSIWYG editor, although very smart and easy to use, does not automatically convert the "less than" (and other) symbols into their html equivalent when they are used withing a blockquote for example. Why do we need to convert in the first place? Because html tags start with a "less than" symbol. So the html code was treating the "<" symbol as the opening of an html tag. The first solution to this is to manually enter the html code for "<" in the html editor of the post. The html equivalent for "<" is &lt;.

The second solution is to wait and hope for the Blogger team to incorporate some features for programmers in the WYSIWYG editor. (thanks Blogger team, by the way).

Finally, after figuring that out, I also wanted to add some syntax highlighting into my code. I found this nice syntax highlighter on google code.

To make this work on blogger, do the following

  1. Download SyntaxHighlighter here
  2. Unzip and upload the following files to your webspace (googlepages is a great place)
    1. SyntaxHighlighter.css
    2. shCore.js'
    3. shBrushCpp.js (or whatever code you wish to use on your blog)
  3. Go to your Dashboard/Layout/Edit HTML
  4. Add the following code right after the tag
    <!-- end outer-wrapper -- >

    <link href='YOUR_GOOGLE_PAGES/SyntaxHighlighter.css' rel='stylesheet'
    type='text/css'/>
    <script language='javascript' src='YOUR_GOOGLE_PAGES/shCore.js'/>
    <script language='javascript' src='YOUR_GOOGLE_PAGES/shBrushCpp.js'/>
    <script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>

Now to add source code to a post, it should be placed in <pre> tag. Obviously, you have to do this within the "Edit Html" tab of the Google editor. The typical format that I use is
<pre name="code" class="Cpp">
...insert code here...
</pre>

voila!

54 comments:

  1. Thanks for sharing this post. I get it done also for my blog now.
    I did test the hole method offline on a local copy of a post.
    Here are the lines that worked for me:
    <link href="http://lockimage.googlepages.com/SyntaxHighlighter.css" rel="stylesheet" type="text/css"/>
    <script language="javascript" src="http://lockimage.googlepages.com/shCore.js"></script>
    <script language="javascript" src="http://lockimage.googlepages.com/shBrushCpp.js"></script>
    <script language="javascript">
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll("code");
    </script>
    </body>
    </html>
    It is very important that the lines come directly before the end of the HTML template.

    Cheers, Paco

    ReplyDelete
  2. I have problem with my post comment code in my blog. Do you know what is wrong? http://kristelschneiderphotographyblog.blogspot.com/

    ReplyDelete
  3. Or use Windows Live Writer which allows you to do this without having to hack the HTML code. See http://skotl.blogspot.com/2009/02/posting-code-snipped-on-blogspotcom.html for more info, or http://www.webtechdaily.com/2008/10/01/top-10-reasons-to-use-windows-live-writer-for-writing-your-blog-posts/ for 10 good reasons to use WLW.

    ReplyDelete
  4. Thanks man...
    http://java2everyone.blogspot.com

    ReplyDelete
  5. Great post. I have been playing with Ubiquity to make it easy to escape all the right characters and add the <pre> tags. You can get the Ubiquity verb from my blog http://tinyurl.com/ag27dc

    ReplyDelete
  6. Thank you so much; I used the newer syntaxhighligher 2.0 on my blog http://weicode.blogspot.com/, it looks nice!

    ReplyDelete
  7. hi, I want to ask how you put your words ( just the steps you told us how to use systaxHighlighter on blogger ) into one frame in your blog. thanks.

    ReplyDelete
  8. Hi... Great blog and you done a great job. I want to use the syntaxhighligher but i don't know how? But know i can take some help from your post. Hopefully it works.Keep up the good work.

    ReplyDelete
  9. you're great. keep sharing ideas. thanks

    ReplyDelete
  10. Excellent and very fresh article.Visit me at www.techieway.blogspot.com

    ReplyDelete
  11. Hi, this post saved me lot of time!, thank you! very useful!

    ReplyDelete
  12. who know about code blogspot please help me.

    http://talentsokker1.blogspot.com/

    my blog has failed addon tratu.vn (baamboo) of firefox installed on my, now I wish to go without. My blog is open source code that can add on it but can not find the code in Html edit your blogspot

    thanks

    ReplyDelete
  13. thanks for good site and tutorial... if u want something JAVA like
    Image-thumbnail-viewer-effect..
    Please Visit Our site at www.warehack.blogspot.com

    ReplyDelete
  14. Thanks for nice tips. This post helped me to groom my blog http://cherupally.blogspot.com

    ReplyDelete
  15. Check Out The Easy Steps No Need To Upload The Files .
    Just A small Entrie

    Use This Link :
    http://bloggerstrade.blogspot.com/2010/03/how-to-display-html-code-in-blogger.html

    ReplyDelete
  16. Thanks.
    your provided article helped me a lot.

    ReplyDelete
  17. I dont have words to thank you.

    ReplyDelete
  18. Thanks. Great work !!!!!!!!!

    ReplyDelete
  19. thx

    https://www.tsmguide.co.cc

    ReplyDelete
  20. Thanks for posting the source code for syntax highlighter!!

    ReplyDelete
  21. Really like this website, this really helps and very useful.I really like flowers and also interested to send flowers all over the world.......

    ReplyDelete
  22. I love your blog. Thanks for sharing with us your arzticles

    ReplyDelete
  23. Hi... Great blog and you done a great job. I want to use the syntaxhighligher but i don't know how? But know i can take some help from your post. Hopefully it works.Keep up the good work.

    ReplyDelete
  24. Blogger source code is highly complex and you need coding experience to customize it. On the other hand wordpress is really helpful

    ReplyDelete
  25. Wow, am so lucky to have found this, thanks for the help.

    ReplyDelete
  26. I'll definitely try this one out. Thanks

    ReplyDelete
  27. This is a great post. Alternatively, feel free to try codexplode.com to be able to format and post your code easily into your blogger blog. It is a free service.

    ReplyDelete
  28. I just writing to say that you have posted some interesting posts recently and I was quite exited to find your blog and read all your articles

    ReplyDelete
  29. Thank you so much; I used the newer syntaxhighligher 2.0 on my blog it looks nice!

    ReplyDelete
  30. but you can use blockquote to do this right? but it wont highlight i guesss

    ReplyDelete
  31. The world can be changed by man's endeavor, and that this endeavor can lead to something new and better .

    ReplyDelete
  32. How would i upload a Povray file onto a blog..and show the source code?!?!?

    ReplyDelete
  33. Do you have any other info about changing the blogger code? Im struggling and I think I will use wordpress istead

    ReplyDelete
  34. see my blogs and 6 million jobs http://ainaow.jobamatic.com
    http://ainaow.blogspot.com

    ReplyDelete
  35. After a little tweaking a playing around finally made it work! Thanks for this post, was finally able to clean up all that mess.

    ReplyDelete
  36. This works for me fine,
    also thanks for lockimage :)

    ReplyDelete
  37. Hi Guys catch all the program codes that you need during your Engineering in this Blog.... All the Programs related to C,C++,Java, Simulation and Modelling are available... They are written as simple as possible.... Catch these codes on
    www.ezeecodes.blogspot.com

    ReplyDelete
  38. sclerotherapy, sclerotherapy training, sclerotherapy course, sclerotherapy certification, varicose vein training.

    ReplyDelete
  39. google prettify can do such thing simpler,lighter,and even better than your syntax highlighter.

    Regards
    kevin-yonathan.blogspot.com
    All about my minds,experience and life

    ReplyDelete
  40. u can use a simple online app, TOHTML

    here u can enter the source code , select the language and style and get html code ,that u can paste in the editor to get a formatted code, i have used it and it also highlights different syntax.. check a post for demo a post for demo here

    ReplyDelete
  41. Hi Tony,

    I implented your solution in my Blogger (gruis.blogspot.com), but inthe browser Internet Explorer (I use version 8) the code is generated, and not shown.

    Is this problem (and the solution) known by you?

    Thanks,
    Hans Drieman

    ReplyDelete
  42. Excellent information. I am proud of you. Because you collect most important information.
    Thanks
    Katy

    ”moo codes”

    ReplyDelete
  43. Yes its working i applied it thorough edit html on blogger ...
    Vertical Jump Bible

    ReplyDelete
  44. hello there is solution i have got just visit this link

    http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

    you can view the sample at this blog http://vanther-x.blogspot.com

    ReplyDelete
  45. got some technical articles covered here , please let me know your feedback
    http://technicalwizardry.blogspot.in/

    ReplyDelete