Peter's Gekko

Sponsors

The Lounge

Wicked Cool Jobs

News

Advertisement

Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Formatting source code in a blog post (revisited)

There are a couple of posts I have to write. But before doing that I need to reinvestigate the way to format source code. The Codebetter site supports the Google syntax highlighter. Which works great for C# code but up till now I havn’t had any luck with XML of HTML. This post was started as a public experiment to get that working. In the process I have posted it again and again to see what it looks like. Now things are straightened out and the cheat-sheet remains.

To use Syntax highlighter you needs a blogging tool which supports direct editing of the underlying HTML. As a non native speaker I also need a good spelling checker. Both are combined in LiveWriter,

Formatting some C#

  • Select the source in Visual studio and copy it to the clipboard
  • Paste the code into notepad. This will paste the raw text only and remove any formatting
  • Copy the code from notepad to the clipboard
  • Go to HTML view
  • Paste the code
  • Enclose it in a pair of pre tags

<pre class="c-sharp" name="code">

public Term GetOrAddTerm(string word, Language language)
{
    Term result = GetTerm(word, language);
    if (result == null)
    {
        result = new Term();
        result.Word = word;
        result.Language = language;
        Save(result);
    }
    return result;
}

</pre>

And this will be the result.

public Term GetOrAddTerm(string word, Language language)
{
    Term result = GetTerm(word, language);
    if (result == null)
    {
        result = new Term();
        result.Word = word;
        result.Language = language;
        Save(result);
    }
    return result;
}

That’ no big deal. But for HTML or XML it is harder. When pasting the code in HTML view the code itself will turn into markup of the page. Not the intention. To solve this use the textarea tag instead of the pre tag.

The html markup of the post will look like this.

<textarea class=”html” name=”code”>


<table>
    <%
        foreach (var crumb in Model.BreadCrumbs)
        {%>
    <tr>
        <td>
            <%= Html.ActionLink(crumb.Naam, crumb.ID.ToString())%>
        </td>
    </tr>
    <%   
        } %>
    <tr>
        <td>
            <%= Model.ArtikelGroep.Naam  %>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
</textarea>

This is pretty weird. Looks like  markup, but it is no markup as it is enclosed between the <textarea> tags. Some pieces of software will trip over this. Like the post editor, which might change the html into escaped html (&lt). But on the CB site the result looks just great.

In the end it’s quite simple. Having this settled I can start working on the real posts. Stay tuned.


Posted Tue, Feb 24 2009 9:16 AM by pvanooijen

[Advertisement]

Comments

Dave wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 9:18 AM

The CopyAsHtml add in for Visual Studio does a good job with this.  www.dotnetgeeks.com/.../Using-CopyAsHtml-Addin-with-VS-2008.aspx

Of course, not as much fun as doing it yourself!

Jon Fuller wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 9:28 AM

I use the google prettifier as well, however, the code doesn't end up highlighted in a feed reader (at least not in google reader).  Have you thought about that?

I like having the html stay clean and let javascript to the coloring so a screen-reader or other accessibility tool can read the screen, but I'd really like for a feed reader to have the coloring as well.

I've put some thought into it, but haven't come up with a solution yet.  Just wanted to throw that out there.

Will Shaver wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 9:29 AM

Dave beat me to it. I use that tool for my blog as well.

pvanooijen wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 9:49 AM

CopyAsHtml does a good job. But it results in very rich html and does not have the nice copy link. And AFAIK (the version I used) doesn't know how to work with html or xml.

pvanooijen wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 9:51 AM

@Jon. The code highlighter requires some scripts to be installed on the web server. Scripts which are not available in an RSS feed reader. In Outlook (my RSS feed reader) the same  problem

Ben Scheirman wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 10:26 AM

@Peter:  the vast majority of your readers read the post in an RSS reader, so the embedded HTML option is much better in my opinion.

defaulthtm wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 12:17 PM

In a feed reader the nicley formatted code in you textarea  looks terrible. Almost as if you have done nothing at all.

Nigel Sampson wrote re: Formatting source code in a blog post (revisited)
on Tue, Feb 24 2009 2:23 PM

I use CopyAsHtml as well, I've found it works with everything in Visual Studio including things like xaml. It copies all the text using the formatting from your Visual Studio.

If it doesn't show up on the context menu then it'll always be under Edit which means you can copy everything.

Emanuel wrote re: Formatting source code in a blog post (revisited)
on Sat, Oct 3 2009 6:38 AM

great blog! Thanks!

Add a Comment

(required)  
(optional)
(required)  
Remember Me?
Devlicio.us