Writing Blogs and Syntax Highlighting

I’ve posted a couple of articles now to Blogger which both have code snippets in them with the syntax highlighted and I thought I’d share what I have learnt and some of the issues I ran into.

When I started my first blog I was surprised that there didn’t seem to be any obvious de facto standard tool to use, but a lot of people seemed to be using Markdown. I’m using Windows so installed probably the best known Markdown editor Markdown Pad. It supports Github Flavoured Markup (GFM) by making use of a service provided by GitHub to convert the markdown to HTML. This enabled in Markdown Pad’s Tools | Options pages:

image

To see it’s effects in the LivePreview Pane you will also need to select the GitHub CSS:

image

With this configuration I was able to add code snippets into Markdown Pad using the GFM code blocks, for example:

````C#
public class MainViewModel
{
    public string MainText { get; private set; }
    public MainViewModel()
    {
        MainText = "Hello SmartTiles!";
    }
}
````

This was shown very nicely in the LivePreview Pane:

image

But how do I get this into my Blog? Well I started of exporting to HTML and taking a look at what Markdown Pad gave me: https://gist.github.com/JasonBSteele/4c99d9525022941644ca#file-post-2-html-export

As you can see from the gist, there is a lot of CSS included in the file to make it self contained. I certainly wouldn’t want to repeat all that for each of my posts so I extracted what I thought was relevant to the syntax highlighting: https://gist.github.com/JasonBSteele/4c99d9525022941644ca#file-github-css.

To get this into the blog I selected Template from the left vertical menu then clicked the Customise button. This navigated me to the Blogger Template Designer page where I selected Advanced | Add CSS which showed the text area for adding the CSS:

image

I then pasted the CSS into the text area and checked the results.

I found that any CSS I added here actually gets added to the page, it isn’t put into a separate CSS files then linked to. I also had some reservations about the way I had extracted the CSS in the first place – how did I know I had the correct CSS, what if other code snippets require CSS that the original snippet didn’t?

Nevertheless I went with it for my first two posts. To post from Markdown Pad I would select the whole text, then right click and select Copy as HTML. I would then go to the Blogger site, start a new post a paste the HTML into the HTML tab of the edit post text area. I found that switching between the HTML tab and the Compose tab would wreck the content so I had to stay on the HTML tab.

I also found that the resulting post didn’t look much like content of Markdown Pad’s LivePreview Pane. This isn’t surprising as the site’s CSS wasn’t being applied. I think there is a way to make this work by extracting all the CSS from the site and applying it to Markdown Pad but I didn’t investigate this further.

None of this made me feel that I was taking the best approach so I did some Googling.

I came across a couple of Scott Hanselman’s posts where he recommends using Windows Live Writer for writing posts: http://www.hanselman.com/blog/DownloadWindowsLiveWriter2012.aspx
and using Alex Gorbatchev’s SyntaxHighlighter for Syntax Highlighting: http://www.hanselman.com/blog/BestCodeSyntaxHighlighterForSnippetsInYourBlog.aspx.

I tried Windows Live Writer and loved the way I could just point it at my Blog and it would download all the relevant files it needs to enable WYSIWYG editing for a post. It then allows you to click a single button to push the post to the blog.

This was a lot easier, however it doesn’t support GFM and Github’s Syntax Highlighting so I decided to try Alex Gorbatchev’s SyntaxHighlighter; which was actually a little trickier than I thought it was going to be.

Scott’s post indicated that I would need to link to a few scripts, but I had already found that there is no way to upload script and CSS files to Blogger. However I did find that they are already hosted by Cloudflare CDN at https://cdnjs.com/libraries/syntaxhighlighter (bizarrely this link is now currently saying “Library not found” but the scripts in https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/ are still being returned).

I added the following script and CSS links into the blogger template just before the tag:

<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js" type="text/javascript"></script>

and the following javascript:

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

just before the last tag. Notice that bloggerMode must be set to true to indicate to SyntaxHighlighter that we are using Blogger and to allow for the way Blogger handles
tags.

Conclusion

Whilst SyntaxHighlighter has some nice features I don’t think the highlighting looks as nice as GitHub’s. Also my digging found the Crayon Syntax Highlighter which looks really great and also has some nice features, but this appears to only be supported by WordPress, not Blogger.

However, to me, using Windows Live Writer for editing and posting outweighs this.

Update

And then this happened: https://productforums.google.com/forum/#!msg/blogger/-49FC2_0l-g/gA1zmGmvzjYJ and https://twitter.com/shanselman/status/603632170855440384.

So, at the time of writing, Windows Live Writer is unable to connect to Blogger because Blogger now requires OAuth authentication which WLW does not support.

This has forced me to look into going over to http://wordpress.com. They will host your blog for free (although they may show ads). However even though the blog engine is WordPress they only support a limited number of WordPress plugins (unless you go premium) and unfortunately this does not include Crayon Syntax Highlighter.

However WordPress.com do support a built in Syntax Highlighter described here: https://en.support.wordpress.com/code/posting-source-code/ and I found a plugin for it here: http://richhewlett.com/wlwsourcecodeplugin/.

So I’ve exported my blog from Blogger, imported it into WordPress.com and am now using Richard Hewlett’s plugin (thanks Richard!).

Advertisements
Writing Blogs and Syntax Highlighting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s