The Easy Way to Display Source Code in WordPress Post
24th Jan 2010 | Posted by Eko S. | 45 CommentsFor sites that frequently display source code, such as tutorial sites, need an easiest way to display code on their pages. In WordPress have a great ways to display code, i.e WordPress Syntax Highlighting plugin.
Overview
This plugin integrates Alex Gorbatchev’s Syntax Highlighter Tool : Alex’s Site. Full supports syntax highlighting in the following languages:
- Bash/shell
- C#
- C++
- CSS
- Delphi
- Diff
- Groovy
- JavaScript
- Java
- Perl
- PHP
- Plain Text
- Python
- Ruby
- Scala
- SQL
- Visual Basic
- XML/HTML
Instalation
- You can download this plugin here (.zip file)
- Unzip syntax-highlighter-and-code-prettifier.zip
- Upload in /wp-content/plugins on your hosting with FTP or if you use free WordPress hosting, you can upload on your Dashboard > Plugins > Add New > Upload
- Then activate this plugin on your Dashboard > Plugins > Installed > Syntax Highlighter and Code Prettifier Plugin for WordPress
Usage
Just surround your code like this:
<pre class="brush:[code-alias]"> …Your Code Here </pre>
replace the "[code-alias]" segment with the type of code you have. See all the available brush aliases.
Use this symbol to replace < and > :
- > will become >
- < will become <
For Example,
HTML
You want to input this code in your post :
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
See this picture how to usage :
CSS
You want to input this code in your post :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
See this picture for how to usage:
PHP
You want to input this code in your post :
<?php //This is a comment /*This is a comment block*/ ?>
See this picture for how to usage:
JavaScript
You want to input this code in your post :
<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>
See this picture for how to usage :
Thanks for Vijesh Mehta about this tutorial we just test for wordpress 2.9.1..and still working 
About The Author
Shared
42 Comments to “The Easy Way to Display Source Code in WordPress Post”
Add Comments (+)-
-
Hi, thanks for your appreciation…
We will continue to learn to improve our writing, nice to meet you
-
-
-
I enjoyed the article and thanks in upon to posting such valuable info as an alternative of all of us to skim, I expand on it both valuable and instructional and I method to these days it as again as I can.
-
This is a poker-faced blog and I alter pongy chief on reading it every morning rowing-boat thanks you
aright sharing it! -
I well enjoyed reading your blog and breed it both illuminating and interesting. I pine be ineluctable to bookmark it and cavity in it as large as I can.
Thanks
Bernice Franklin
-
I found this article useful in a paper I am writing at university. Hopefully, I get an A+ now!
Thanks
-
This article was helpful in a paper I am writing for my thesis.
Thanks
Bernice Franklin
-
-
Few people realize how comforting it is to have such an open forum for expression that we find in your blog site.
-
This blog is a place for us to learn and share what we know. I love the open source principle, because it makes us all be smarter.
Thanks
-
-
You raise a lot of questions in my mind; you wrote a good post, but it is also thought provoking, and I will have to ponder it a bit more; I will return soon.
-
Hi, thanks…
We tried to create a content, a simple, easily understood and has been our previous practice.
Suggestions and input for us, makes us better.
-
-
Nice blog. I got a lot of good data. I’ve been following this technology for awhile. It’s interesting how it keeps changing, yet some of the core components remain the same. Have you seen much change since Google made their latest acquisition in the domain?
-
Amiable post and this fill someone in on helped me alot in my college assignement. Thanks you for your information.
-
It was a very nice theme! Just wanna say thank you for the data you have apportioned. Just continue writing this kind of post. I will be your true reader. Thanks again.
-
Nice dispatch and this post helped me alot in my college assignement. Say thank you you on your information.
-
I have to say, every time I come to http://www.dynamicwp.net you have another fascinating post to read. One of my friends was talking to me about this topic a couple weeks ago, so I think I will send them the url here and see what they say.
-
everything worked perfectly. I am going to bookmark this page and put a link from my site as well, as it has most the the problems people have with coding.
-
Thank you for publishing this it was helpful for a paper I am now writing for my finals. Thanks
-
Landlord turned posts, read each one, appreciate the sentiment a few minutes long on the shock
-
Thanks for posting the screen shots and examples for displaying source code, very helpful, thanks!!
-
This is often a excellent website. I have been back a couple of times over the past 7 days and want to sign up for your feed making use of Google but find it difficult to learn the way to do it precisly. Would you know of any tutorials?
-
Jim says: This post has good info on displaying HTML source code in your posts
http://www.theblogaholic.com/2011/01/16/displaying-html-source-code-in-wordpress-posts/
-
I’ve been looking for such a plugin, thanks so much for the resource.
Luke
-
What a valuable resource! Thanks so much for the insights, will use your method to display source code in the future. Really helpful.
-
saturnman says: really helpful post. thx
Trackbacks/Pingbacks
- Tweets that mention DynamicWP » Blog Archive » The Easy Way to Display Source Code in Wordpress Post -- Topsy.com
- wp-popular.com » Blog Archive » The Easy Way to Display Source Code in Wordpress Post | DynamicWP
- how to highlight and beautify posts with source code « Alen Ziver Malhasoglu's Microsoft Commerce Server Blog
I like the way you write, few parts I had to read twice
but still good stuff.