How to Display Source Code Within WordPress
Ron Fredericks writes: I have a problem in common with many software engineers and technical managers – “How can I display source code within my blog?”
See, the problem starts when the source code to be displayed interacts with the blogging software itself and then corrupts the blog’s own loop-and-display engine. Thus, the blog page becomes corrupt or at the very least, becomes mis-formatted and hard to read. Of course it would also be nice to color code a software snippet similar to a source code editor to make the posted source code easier to read.
I tried several techniques during my Internet search for “WordPress source code formatting”. I discovered a common theme – there are source code display and highlighting methods available – in fact too many are available. So the search became a “needle in the haystack” time sink. And the sad fact, most choices have some severe limitations.
But at last, I found Dean Lee’s blog post: Source Code syntax highlighting plugin for WordPress (V1.1)
Dan’s pluglin for WordPress has all the features I was looking for:
- installs as a simple plugin for WordPress
- usage within a blog post is easy through the use of the
pretag - source code displays in its own container with line numbers for reference
- a reader should be able to easily select a range of displayed source code and copy it for their own use (without also selecting the displayed line numbers)
- source code display should not break my WordPress blogging software
Dean’s plugin uses an open-source project hosted by sourceforge.net to handle the language-specific highlighting called: GeSHi – Generic Syntax Highlighter for PHP.
GeSHi delivers the other requiements I was looking for in display of source code within WordPress:
- source code should display with language-aware color coding
- code should be open-source with an active developer community
- display controls should include support for lots of popular languages
We do have to modify our WordPress CSS style sheet before using Dean’s plugin. Here is a display of the update he suggests we make to our template…
Update to wp-content/themes/eciWidget/style.css
-
-
/* Add the following CSS styles for Dean’s code Highlighter */
-
.ch_code_container {
-
background-color: #f0f0f0;
-
border: 1px solid #C3CED9;
-
padding: 0px 0px 0 0;
-
width: 100%;
-
text-align: left;
-
font-size:1.00em;
-
overflow:auto;
-
}
-
.ch_code_container .head
-
{
-
color: #808080;
-
font-weight: bold;
-
background-color: #f0f0ff;
-
border-bottom: 1px solid #d0d0d0;
-
padding: 2px;
-
}
-
Here is an image of a popular perl sendmail package with my new antispam patch included…using Dean’s Highlighter Plugin and his default CSS styles loaded into my WordPress template…
As you can see, the display window above highlights the perl language syntax and is safely contained. But, yhuk! What’s going on with the display? The main problems were easily solved with Dean’s plug-in – but let’s fix that word wrap mixed with horizontal scroll bar problem.
May 27th, 2007 at 12:52 am
[...] Embedded Components and Tools Blog Center « How to Display Source Code Within WordPress [...]
May 29th, 2007 at 1:06 am
[...] I discovered Dean Lee’s Code Highlighter plugin for WordPress as the blogging solution for my source code display needs. [...]
July 5th, 2007 at 4:41 pm
This is not a solution. I don’t have access to install plugins.
September 18th, 2007 at 8:18 am
Hi from Chicago! Nice blog posting about How to Display Source Code Within WordPress. I would have to agree with you on this one. I am going to look more into . This Tuesday I have time.
September 18th, 2007 at 12:47 pm
Hi! Swiss banker here. Nice blog posting about How to Display Source Code Within WordPress. I would have to agree with you on this one. I am going to look more into . This Tuesday I have time.
September 18th, 2007 at 8:06 pm
Hello webmaster, I came across your blog posting after searching for and your post on How to Display Source Code Within WordPress makes an interesting read. Thanks for sharing. I will research more next Wednesday when I have the day off.
September 30th, 2007 at 10:48 pm
Nice articles, helped me a lot thanks.
November 1st, 2007 at 4:42 pm
Hello! I came across your blog posting after searching for and your post on How to Display Source Code Within WordPress makes an interesting read. Thanks for sharing. I will research more next Thursday when I have the day off.
December 1st, 2007 at 5:51 pm
Thankiossi
It’s great
December 5th, 2007 at 12:26 pm
thankiosso
Cool!
December 6th, 2007 at 4:11 am
lol
thankiossp!
December 19th, 2007 at 9:44 am
Good post
January 6th, 2008 at 3:43 am
Hi – just wanted to say good design and blog – cu
June 17th, 2008 at 2:05 am
Thanks! Cool highlighter
December 2nd, 2010 at 3:48 pm
Thank you for sharing this details in your article. I have been waiting a long time for someone to create this. Please do not discontinue this thing you have working.
December 4th, 2011 at 4:13 am
I do agree with all of the ideas you have presented in your post. They are really convincing and will certainly work. Still, the posts are too short for beginners. Could you please extend them a little from next time? Thanks for the post
December 12th, 2011 at 5:46 am
I fully support you and think you pointed out many exciting and fascinating arguments. Of course, there are a few issues which depend on your personal attitude towards Embedded Components and Tools Blog Center » Blog Archive » How to Display Source Code Within WordPress but nonetheless, thank you for this contribution. For the later, I would love to get a few more contributions related to this subject and written in this well explaining language. Hopefully, I am not the exclusive 1 providing you the honour for your blogging energy, I will ensure this in a week. So long, keep on blogging, I will surely have another visit.
May 6th, 2013 at 8:30 pm
I think that is one of the such a lot significant information for me.
And i’m happy studying your article. However wanna commentary on some basic things, The web site style is perfect, the articles is truly nice : D. Excellent job, cheers