Markdown parsing and syntax highlighting in WebSharper
Today I’m going to write about two new extensions for WebSharper, namely the Remarkable markdown parser, and the Google CodePrettify syntax highlighter.
Before I’ll show you how to use them together, lets have a look at them one-by-one.
Remarkable
The WebSharper extension works really similarly to the original JavaScript library.
First of all we should check what options we have to configure it.
Most of them are pretty straightforward, and should be easy to understand. I would like to write a little bit about LangPrefix and Highlight.
First, lets see LangPrefix, since we will use this today. What does it do?
I will show you in an example: lets say you want to post an F# snippet to a forum which uses Remarkable for parsing. You can simply write this:
```fsharp
let inc x = x + 1
let a = 22
inc a
```With the configuration above the output will be the following:
As you can see the code tag got a class with the prefix and the languages name. We will use this later to make it work with CodePrettify.
The other interesting option is the Highlight. Basically it means that you can give it a highlighter function and Remarkable will use it in fenced blocks. By default Remarkable doesn’t include any highlighter so, you can take two routes. The first is that you go hardcore and write your own highlighter function, or you can look for highlighter that already exists, and works for sure. Personally I prefer the latter. In this post I won’t cover that, but later I will write about Highlightjs in another entry, and will show you, how to use it with Remarkable.
Now that we have a basic understanding about the configurations we can move on to Remarkable’s actual usage. It has two steps: first you have to create a new instance of the Remarkable class. It’s constructor accepts an Options type, so you can set it up with a configuration right away, or if you leave it blank, the instance will have the default settings (which is the same as the configuration above).
After that you you can use its Render function which will take a markdown string and will return a rendered string.
I will also link a snippet from try WebSharper, so you can see a complete example of Remarkable’s usage in WebSharper, and you can freely experiment with it.
CodePrettify
CodePrettify is really simple. If you call the PrettyPrint() method of the PR static class, it will look for all the <pre> and <code> tags with the prettyprint class, and will highlight those. You can specify the code’s language with the lang-languagename class, and it is also possible to add line numbering with the linenums class. You can set the starting number with linenums:4. So in this case the numbering will start from 4.
How to use them together
Since in markdown we can’t add classes to the generated html tags we have to achieve this by other means. Fortunately Remarkable’s LangPrefix just does the right thing for us: if you set the LangPrefix to prettyprint lang-, every fenced block will be highlighted, because all of them will get the prettyprint class with the lang-languagename. Of course you also can add linenums to the mix.
So, we have set up Remarkable, to add the right classes to our code blocks, in the next step we will use the Render function on our markdown text, and then call PR.PrettyPrint() to finish the job.
In most cases it’s as simple as that, but if you are doing dynamic rendering you can’t really do that. I have wrote a snippet in try ws to show a case of dynamic rendering and the solution to make it work:
It is really similar to the first try ws snippet, but this one can do dynamic highlighting, while the first one was only a simple dynamic markdown parser.
How to get them
If you are new to WebSharper, at first, getting an extension can cause a headache, but it really isn’t a big deal. First you need to get NuGet, then in Visual Studio you can reach manage NuGet packages from the project menu, and there you can search for the extensions that you need (make sure that the include prerelease is enabled).