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.
Leave a Reply
You must be logged in to post a comment.