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: syntax highlighters, wordpress, plugin, beautify
IMPORTANT: This blog welcomes Guest Bloggers, Writers to also contribute by writing Guest Posts and also Make Money!. Check out our Revenue Sharing Program
Posted under: How-To, Wordpress|
1998 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: |
Posted under: How-To, Wordpress
Article by Nihar
Nihar has written 1353 articles .If you like this Post, you can follow NiharsWorld on Twitter.
Subscribe to NiharsWorld feed via RSS or EMAIL to receive instant updates.
NiharsWorld is a revenue sharing blog, Write for us and make money. Read here for more info
Subscribe
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
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
@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
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
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
@Yan, Thanks…
@Pavan, Yeah it is very useful for those who put code samples in the blog…
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
@Chetan, Yep you are true.
[...] How to Beautify Code samples in your post using Syntax Highlighter [...]
[...] How to Beautify Code samples in your post using Syntax Highlighter [...]
[...] In this post i have also used Syntax Highlighting, this is achieved using Beautify code using Syntax Highlighter Pluging [...]