• Blogging
  • Freebies
  • Freeware
  • How-To
  • Make Money Online
  • Mobile
  • Home >> How-To >> How to Beautify Code samples in your post using Syntax Highlighter

    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

    IMPORTANT: This blog welcomes Guest Bloggers, Writers to also contribute by writing Guest Posts and also Make Money!. Check out our Revenue Sharing Program
    1924 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:





    8 Comments

    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.

    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.

    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

    5. Pavan Kumar says:

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

    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 🙂

    Leave a Reply

    page counter
    NiharsWorld on Twitter NiharsWorld on Facebook NiharsWorld RSS Feed