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.

17 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. 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.

  5. 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.

  6. 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.

  7. Deva Says:

    Nice articles, helped me a lot thanks.

  8. 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.

  9. Mendneamure Says:

    Thankiossi
    It’s great

  10. WRERWAYSALA Says:

    thankiosso
    Cool!

  11. Wederaids Says:

    lol
    thankiossp!

  12. twink pictures Says:

    Good post

  13. Max Says:

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

  14. Zhuk Says:

    Thanks! Cool highlighter

  15. sites like groupon Says:

    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.

  16. Ricardo Beneker Says:

    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

  17. Webserver Cluster Says:

    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.

Leave a Reply

What is 3 + 13 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)