Displaying Source Code in a WordPress Post

Posted by Ken on February 1, 2009

While setting up this blog, I came upon my first challenge: How can you display source code in a WordPress post?

There are many solutions to this problem which include various WordPress.org plug-ins. The problem with the plug-ins is that they don’t work with freebee WordPress.com blogs. The simplest solution that I found for WordPress.com blogs was to simply wrap the code you want to post in “sourcecode” tags and let javascript take care of the rest. Implementing this is easy because you don’t have to worry about a big blob of HTML. All that is required is the code you want to paste and the javascript tags. Example:

static void Main(string[] args)
{
      Console.Out.WriteLine("Hello World!");
      return;
}

Being the perfectionist that I am, I wanted to see if I could get the code to look closer to the default fonts and colors used in Visual Studio. Thanks to this posting, I discovered pastebin.com. It does a nice job of converting source code into html. And it has syntax highlighting for most languages, including C#. To streamline the process, I wrote a parser. This code will parse the full source of the pastebin output, yank out the relevent html, and add style to make it look close to Visual Studio. The following source code is a solution to the problem and also a demonstration. Which method do you think looks better?

using System;
using System.IO;
using System.Text.RegularExpressions;
 
namespace PasteBinCodeScrubber
{
    class Program
    {
        static void Main(string[] args)
        {
            FileInfo[] allHtmlFiles = new DirectoryInfo(“.”).GetFiles(“*.htm*”);
            foreach (FileInfo htmlFile in allHtmlFiles)
            {
                string allHtml = File.ReadAllText(htmlFile.FullName);
 
                // capture all relevent html
                Regex sourceCodeRegex = new Regex(“<div class=“csharp“ style=“font-family: monospace;“><ol>[\s\S]*?</ol></div>”);
                string sourceCodeHtml = sourceCodeRegex.Match(allHtml).Value;
 
                // doctor the html
                sourceCodeHtml = ScrubHtml(sourceCodeHtml);
                sourceCodeHtml = ReplaceCssClassWithStyle(sourceCodeHtml);
 
                File.WriteAllText(htmlFile.FullName + “.out”, sourceCodeHtml);
            }
        }
 
        private static string ReplaceCssClassWithStyle(string sourceCodeHtml)
        {
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“de1““, string.Empty);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“de2““, string.Empty);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“inp““, “style=“color: red;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“li1““, “style=“background: #ffffff;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“li2““, “style=“background: #f4f4f4;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“kw1““, “style=“color: #0600FF;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“kw2““, “style=“color: #FF8000;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“kw3““, “style=“color: #0600FF;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“kw4““, “style=“color: #0600FF;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“kw5““, “style=“color: #000000;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“co1““, “style=“color: green;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“co2““, “style=“color: green;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“coMULTI““, “style=“color: green;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“es0““, “style=“color: #008080;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“br0““, “style=“color: #008000;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“st0““, “style=“color: maroon;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“nu0““, “style=“color: #FF0000;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“me1““, “style=“color: #0000FF;““);
            sourceCodeHtml = sourceCodeHtml.Replace(“class=“me2““, “style=“color: #0000FF;““);
            return sourceCodeHtml;
        }
 
        private static string ScrubHtml(string sourceCodeHtml)
        {
            // add font size
            sourceCodeHtml = sourceCodeHtml.Replace(“<div class=“csharp“ style=“font-family: monospace;“>”,
                                                    “<div style=“font-family:monospace; font-size:1.3em;“>”);
 
            // remove list tags
            sourceCodeHtml = sourceCodeHtml.Replace(“<ol>”, string.Empty);
            sourceCodeHtml = sourceCodeHtml.Replace(“</ol>”, string.Empty);
            sourceCodeHtml = sourceCodeHtml.Replace(“<li “, “<div “);
            sourceCodeHtml = sourceCodeHtml.Replace(“</li>”, “</div>”);
 
            // remove hyperlinks
            Regex hyperLinkRegex = new Regex(“<a href=.*?>(?’linkWrappedHtml'[\s\S]*?)</a>”, RegexOptions.ExplicitCapture);
            MatchCollection hyperLinkMatches = hyperLinkRegex.Matches(sourceCodeHtml);
            foreach (Match hyperLinkMatch in hyperLinkMatches)
            {
                string sHtmlInsideHyperLink = hyperLinkMatch.Groups[“linkWrappedHtml”].Value;
                string sFullHyperLink = hyperLinkMatch.Value;
                sourceCodeHtml = sourceCodeHtml.Replace(sFullHyperLink, sHtmlInsideHyperLink);
            }
 
            return sourceCodeHtml;
        }
    }
}

This entry was posted on February 1, 2009 at 11:26 pm and is filed under WordPress. Tagged: pastebin, WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Displaying Source Code in a WordPress Post”

Mark said

March 3, 2009 at 9:58 am
I think I like the first bit of code better. You’re right, the second code chunk looks exactly like the default font and syntax highlighting however the highlighting in the first block works just as well. In general I never use line numbers but I could totally see how they could be practical in a blog should you need to make reference to a specific line. Also it comes with the extra links at the top.
Another issue that occurred to me looking at this post was line wrapping.

This might belong in a post of its own but what is the standard these days? I’ve heard both sides of the issue argued. Some say it’s antiquated and dead. Wide screen monitors and modern IDEs with nicer fonts make the old 80 character limit a thing of the past. Others argue that limiting yourself to a certain width keeps your code pretty and easy to read. I’ll have to agree that when a browser or editor decides on its own when to wrap a line of code it’s generally not aesthetically pleasing.

Maybe for websites the best thing would be to put code in a textbox with horizontal and vertical scroll bars. This prevents line wrapping and also makes it easier to set the code apart from the content of the page.

Reply
- Ken said
  
  March 3, 2009 at 7:39 pm
  I agree with you and I have adopted the first style of displaying source code. It’s very easy to implement (you just wrap the code in a couple javascript tags) and it has the useful bells at the top. It is also preferable because, like you noticed, it avoids the word wrapping problem by adding a horizontal scroll bar. The second solution does not do this. It will wrap the code and make it hard to read.
  
  As far as line length for general coding, I personally am not tied to an 80 character limit, although doing so may make it easier if you are required to look at the same code using different text editors or different PC environments that don’t have your preferred monitor resolution available. However, I think a line becoming to long is a sign of trouble, possibly a codesmell. When you need to start using a horizontal scroll to view your code, it becomes less readable. If it is hard to read, it will be harder to maintain.
  
  If such a situation arises, I’d recommend refactoring the offending code to a variable (or as a return value of a method) with a self-documenting name. By doing so, you should have no problem getting the line to a manageable length. Do this multiple times, if necessary. The better you are able to break it down, the easier the code will read. However, one unfortunate situation where this may occur in VS is while using the DataSet designer to create table adapters. If you have a table with a large number of columns, the generated insert method will have as many parameters as there are columns. This is just the way it is, unfortunately. I believe the CodeComplete book recommends limiting your parameter list to about 6 or 7 parameters in general. If you have more than that, try to group the related parameters into a struct or class.
  
  Reply
hCGBoost said

December 16, 2011 at 7:12 pm
This article is a at the end of the day good article. Lossing weight is benificial since your well-being and happiness.

Reply
brandedkw6 said

June 17, 2015 at 12:11 am
I simply couldn’t go away your site prior to suggesting that I extremely loved the standard info a person supply
to your visitors? Is going to be back often in order to check up on new posts

Reply

Ken Kopczyk

Hurdles in .NET Development

Subscribe

Blogroll

Cool Blog Posts

Resources

Archives

Recent Posts