Make the code pretty damn it!!

So I haven’t posted here in a bit.  For a variety of reasons.  One of them has been my struggles with BlogEngine which I think I am just now starting to really get down.

My most recent struggle has been with code syntax highlighting.  If you are a developer and you’re going to blog you will inevitably need to put some code on your blog.  So this was my project – make the code pretty.

My thoughts on syntax highlighting is keep it simple.  My requirements:

• The code should look somewhat like code you might see in an IDE or Notepad++ type product.
• You should be able to copy it to your clipboard very easily

Solution 1

So I use BlogEngine, I also mostly use Windows Live Writer for the actual “writing” part so here was my first approach:

Step 1: Google “blogengine Code syntax highlighting”.

Step 2:  Do whatever the first link tells me.

Step 3:  Profit.

Somewhere along the way I got lost.  I stumbled upon this plugin.  It seemed to be perfect BlogEngine (check), (Live Writer) check and pretty code (check).  Well I found some issues.  It seemed very brittle.  Sometimes I’d edit a post and the code blocks would lose line breaks.  or I’d re-open the post using Live Writer and it would break the code blocks again.

Solution 2

So in short solution 1 was no good.  I mean I should have smelled that out from the beginning.  Really, I need C# code just to format some code in an HTML page?  I needed a better solution.  More importantly, I need to change my approach.

Step 1:  Find the best code syntax highlighter there is.  If I want to put code in an HTML page what should I use?  After some research there are definitely split opinions but goolge-code-prettify is certainly amongst the best so I went with that.

Step 2:  Has anyone put that to use in BlogEngine before?  How?  Sure enough naspinksi has : http://naspinski.net/post/How-to-use-Google-Code-Prettify-with-BlogEngineNet.aspx.

Followed those steps almost to the letter and it worked.  (Well I also had to rip out the old Syntax Highlighter Extension code which was tedious and annoying but whatever.)

Step 3:  Modified my theme style sheet to format the pre tag a bit:

pre{background:#F4F5F7;      padding:8px 12px 8px 36px;      overflow: scroll; }

Step 4:  Download and install the Windows Live Writer plugin for google-code-prettify.

Step 5:  Profit.  (Well, we’re still working on this one.)

Lesson Learned:

When you have a problem.  Solve that problem.  Don’t create artificial requirements that will ultimately alter the final solution.  The reality is if naspinksi hadn’t posted about how to incorporate google-code-prettify into BlogEngine I could have figure that out.  Heck, I probably could even write the Live Writer plugin if so inclined.  Those issues were more about the toolset I was using then the original problem I set out to solve.

My problem was that I needed to format my code samples in the most robust and lightweight method possible.  And now, I’m kind of doing that.