The Easy Way to Display Source Code in WordPress Post
24th Jan 2010 | Posted by Eko S. | 26 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
23 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
-
-
-
UGG Boots says: 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
-
UGG Boots says: This article was helpful in a paper I am writing for my thesis.
Thanks
Bernice Franklin
-
discount amazon says: great article. I would love to follow you on twitter.
-
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. -
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 -
Kitchen Cabinet Blog says: Really useful — Will definitely use this on my coding blog. Thanks.
-
Charles David Purses says: 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.
-
Thanks for posting the screen shots and examples for displaying source code, very helpful, thanks!!
-
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/
-
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.