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 pre tag
  • 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

Code (css)
  1.  
  2. /* Add the following CSS styles for Dean’s code Highlighter */
  3. .ch_code_container {
  4. background-color: #f0f0f0;
  5. border: 1px solid #C3CED9;
  6. padding: 0px 0px 0 0;
  7. width: 100%;
  8. text-align: left;
  9. font-size:1.00em;
  10. overflow:auto;
  11. }
  12. .ch_code_container .head
  13. {
  14. color: #808080;
  15. font-weight: bold;
  16. background-color: #f0f0ff;
  17. border-bottom: 1px solid #d0d0d0;
  18. padding: 2px;
  19. }
  20.  


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…

Dean's Highlighter Sample Output Using Default CSS 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.

16 Responses to “How to Display Source Code Within WordPress”

  1. Embedded Components and Tools Blog Center » Blog Archive » How to Fix Dean Lee’s Source Code Highlight Plugin Says:

    […] Embedded Components and Tools Blog Center « How to Display Source Code Within WordPress […]

  2. Embedded Components and Tools Blog Center » Blog Archive » How to build Dean Lee’s Syntax Highlighter from latest components Says:

    […] I discovered Dean Lee’s Code Highlighter plugin for WordPress as the blogging solution for my source code display needs. […]

  3. gabrelif Says:

    This is not a solution. I don’t have access to install plugins.

  4. Ron Fredericks Says:

    Hi gabrelif:

    Your point is well taken. I am referring to the versions of WordPress that can be installed and configured from wordpress.org. I am not familar with the multiuser version hosted by wordpress.com.

    I added more detail on WordPress version and component techniques in a related post. You can find it here:
    http://www.embeddedcomponents.com/blogs/2007/05/how-to-build-dean-lees-syntax-highlighter-from-latest-components/

    Best regards,

    Ron

  5. fads Says:

    http://gigaom.com/2006/01/11/automattic-wordpress/#comment-557159

  6. Peter Says:

    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.

  7. Swiss Dude Says:

    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.

  8. Anime Guy Says:

    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.

  9. Deva Says:

    Nice articles, helped me a lot thanks.

  10. Finance Barry Says:

    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.

  11. Mendneamure Says:

    Thankiossi
    It’s great

  12. WRERWAYSALA Says:

    thankiosso
    Cool!

  13. Wederaids Says:

    lol
    thankiossp!

  14. twink pictures Says:

    Good post

  15. Phernebeind Says:

    Hello, i want to note that your question is typical
    porzana porzana

  16. Max Says:

    Hi – just wanted to say good design and blog – cu

Leave a Reply