Subscribe in a reader - Subscribe via Email - 1921 Subscribers and Counting!!!

World of information, opinions, cricket and technology.

How to Beautify Code samples in your post using Syntax Highlighter



I was reading Do you need all those revisions? post from Nice2All blog. In the post, i found piece of SQL and PHP code.

Below is the Sample 1, how the code looked in that post:

<script type="text/javascript">
<!--
document.write("<i>Hello World!");
//-->
</script>

As you can see that the coloring, formatting is making the code stand out and there are also options like view plain, copy to clipboard, print.

I think i have around 5 posts that show code samples in the posts and here is how it looks.

Below is the Sample 2:


<script type="text/javascript">
<!–
document.write("<i>Hello World!");
//–>
</script>

I know every one would prefer the Sample 1 rather than the Sample 2.

As soon as i read the above mentioned post, i left a comment asking the author about the code format and found out that it can be done by just installing a wordpress plugin called SyntaxHighlighter Plus.

How to beautify code sample in your post using Syntax Highlighter Plus:

  • Open a new post or Modify an existing post
  • For ex: If i want to show javascript code, then just put javascript code in between [javascript/] your code.. [/javascript]
  • Save the post

It supports following languages:

* Bash — bash, sh
* C++ — cpp, c, c++
* C# — c#, c-sharp, csharp
* CSS — css
* Delphi — delphi, pascal
* Java — java
* JavaScript — js, jscript, javascript
* PHP — php
* Python — py, python
* Ruby — rb, ruby, rails, ror
* SQL — sql
* VB — vb, vb.net
* XML/HTML — xml, html, xhtml, xslt


You can find more info about this plugin here

Download SyntaxHighlighter Plus

Technorati Tags: , , ,




RSS Feed

1921 readers are already subscribed to this blog! Why don't you be one of them? Subscribe to this blog via your favorite RSS feed reader or by entering your email address on the form below:


You Should Also Check Out These Posts:


11 Responses to “How to Beautify Code samples in your post using Syntax Highlighter”

  1. This is definitely a great thing to have – especially for somebody like me who keeps changing the theme code (and sometiems WP core) as well in bits and pieces.

    Many times, after I make changes I tend to miss a semi-colon or closing php tag. This should be of great help :) Will try and provide feedback.

    Ajith Edasserys last blog post..Blogging tips for the current market conditions

  2. Lyndi says:

    I have been using this plugin for a while now. It works quite well but it does have two problems. It does not show properly in the RSS feed and if the code shown is a bit long the page could be slow in loading. I overcame the first problem by using another plugin called RSSless so that I can inform feed readers that the code is only available on the actual page. The other problem I overcame by making sure that I break the code I want to show up into smaller snippets.

    Thanks for the mention.

    Lyndis last blog post..Comment changes in WordPress 2.7

  3. Nihar says:

    @Ajith, I think you have misunderstood the post. This plugin gives a better look to the code samples that you show on the your posts.

    @Lyndi, Thanks for letting me know the problems. I will install RSSless

  4. Wow, this looks so much better that anything I have seen in a long time… great discovery, Nihar.

    Yan

    Yan Shall Blogs last blog post..A – Z Blogging Guide for Beginners

  5. Pavan Kumar says:

    That is useful for those who use codes regularly in blog… cool tip

    Pavan Kumars last blog post..Great List Of Dofollow Blog Search Engines

  6. Nihar says:

    @Yan, Thanks…

    @Pavan, Yeah it is very useful for those who put code samples in the blog…

  7. Chetan says:

    This plug-in is really great for the Coders.
    I will install this after my PHP study :)

    Chetans last blog post..Will it be SONY’s new PSP 2 ?

  8. Nihar says:

    @Chetan, Yep you are true.

  9. [...] How to Beautify Code samples in your post using Syntax Highlighter [...]

  10. [...] In this post i have also used Syntax Highlighting, this is achieved using Beautify code using Syntax Highlighter Pluging [...]

Leave a Reply





CommentLuv Enabled