In this tutorial, you will learn how to apply code syntax highlighting for any code that has been written within the Markdown editor in Umbraco CMS. Markdown is a great language that lets you focus on writing. Out-of-the-box, Umbraco provides a markdown editor that allows content editors to easily write content using Markdown. For instructions on how to set this up, I recommend reading a previous article that I wrote which is available here
The biggest issue that I encountered when switching to markdown on this website was formatting the code snippets. I use Google Code Prettify to make my code samples look pimpin'. To create a code snippet using prettify is done like this:
The important part to notice is that the code is wrapped with a pre tag and a class:
Out-of-the-box, the Umbraco property renderer will not work with Google syntax highlighting. Instead, the renderer will simply convert markdown content to HTML, like this:
To learn how to rectify this problem read on! Like most programming challenges that are a few ways to solve this issue. From my research, using a package like MarkdownDeep and then creating a custom formatter seems like a good approach. For my needs, having a formatter seemed like overkill. My code snippets are only written within a single document type, called tutorials. A simpler method was to use the HTML Agility pack. HTML Agility Pack is a great tool for easily manipulating HTML. To use the HTML Agility pack to inject the Syntax highlighting class around any code snippets that were written inside of my tutorials could be done like this:
Here we get the HTML converted from markdown using the normal Umbraco content helper. This gets passed into the HtmlDocuments LoadHtml() method. From here you can perform a quick search for all code blocks and then the HTML can be updated as needed. Those four lines of code are pretty much everything you need. As you cans ee in the screenshot below my code sample now look s a lot nicer as it has some cool colours.
You now have syntax highlighting with markdown in Umbraco, happy coding!
