Highlighting code in blog posts

Once upon a time, I wrote a plug-in for Windows Live Writer that took code that had been copied from Visual Studio to the clipboard and converted it to an HTML pre block for my blog posts. The different colors were maintained during this conversion (in essence VS copies the code as RTF) so that the code displayed here in my blog posts would be nicely highlighted. I even published it to GitHub so that it could also be used for Open Live Writer too.

That was then, but this is now.

Advantages: it’s all just HTML once in the blog post and doesn’t require any JavaScript to actively highlight the code. Disadvantages: I find I spend way more time in Sublime Text, and now in VSCode, than I ever do in Visual Studio. Recently I found myself opening VS just so that I could copy some code over, then copy it to the clipboard from there, and then paste it into WLW. Erm, yikes?

Time then for a more modern method of highlighting code in my posts. I did a bit of research and the JavaScript library that seems to be The One for this kind of work is Prism. The markup is minimal (a code element with a standard attribute inside a pre element) and you can customize which languages you support with the library.

So let’s try it.

Here’s the classic Prism markup:

<pre><code class="language-javascript">
    makeBlogListsAwesome([".simpleList"]);
</code></pre>

Here’s a JavaScript function I use to associate Font Awesome with a bulleted list:

  var makeBlogListItemAwesome = function (jQueryObj) {
    jQueryObj.find("li").prepend("<i class='fa fa-chevron-right'></i>&nbsp;");
  };

  var makeBlogListsAwesome = function (selectors) {
    selectors.forEach(function (selector) {
      makeBlogListItemAwesome($(selector));
    }); 
  };

Finally, a C# function I use to calculate the date of the first post for the calendar widget I wrote.

    private DateTime GetDateOfFirstPost() {
      DateTime defaultDate = new DateTime(2000, 1, 1);

      string firstpost = ConfigurationManager.AppSettings["Graffiti::FirstPost"];
      if (string.IsNullOrEmpty(firstpost)) {
        return defaultDate;
      }

      DateTime firstPostDate;
      if (!DateTime.TryParse(firstpost, out firstPostDate)) {
        return defaultDate;
      }

      return firstPostDate;
    }

And with that comes the undeniable question: do I go back and fix previous blog posts to use this library? It is Christmas after all…

  Loading links to posts on similar topics...