Using HighlightJS in WebSharper

Hudson bay, Canada

As I have promised earlier here is an article about another syntax highlighter extension for WebSharper, namely HighlighJS.

HighlightJS is a bit more complex than CodePrettify, since it has multiple methods that you can use, but it is still pretty simple.

Configuration

The Options object has the following properties:

  • TabReplace: a string is used to replace TAB characters in indentation
  • UseBR: a flag to generate <br> tags instead of new-line characters in the output, useful when code is marked up using a non-<pre> container.
  • ClassPrefix: a string prefix added before class names in the generated markup, used for backwards compatibility with stylesheets.
  • Languages: an array of language names and aliases restricting auto detection to only these languages.
let HljsConfig =
Options(
TabReplace = " "
UseBR = false
)
Hljs.Configure(HljsConfig)

As you have seen above, configuring HighlightJS is almost the same as Remarkable. You have to instantiate the Options object with the configuration that you will need, and then pass it to the Configure method, and that’s it.

How to

If you want to highlight all of the text inside of <pre><code> the only thing you have to do is to call Hljs.InitHighlighting() at some point in the code. It will detect automatically the language used, and will highlight the code according to it.
The other easy thing you can do is to call Hljs.InitHighlightingOnLoad(). It will attach highlighting to the page load event.

These two methods work perfectly fine for most of the times, but what if you don’t want to highlight all of your code inside of <pre><code>, or you want to specifically tell HighlightJS which language the snippet is, to make the highlighting more accurate.
In this case you can use Hljs.Highlight or Hljs.HighlightAuto. The former is the library’s core highlight function, it takes the string which is to be highlighted, and the language name. It returns with a Result type object. The Result object has a Value property, this is the one that we need. It contains the escaped html string.

let EscapedHtml = Hljs.Highlight("int x = 1;\nif(x == 1){ Console.WriteLine(\"1\"); }", "csharp").Value

The HighlightAuto function is similar to the Highlight function, the main difference is that it detect the language of the code, so it takes only a string that to be highlighted. It returns with a ResultAuto type object, which also has the Value property which is the same as the Result Type’s, but ResultAuto contains another ResultAuto object, called Second_best, which contains the highlight of the second best matching language. It’s worth to note, that Second_best may be absent.

let EscapedHtml = Hljs.HighlightAuto("int x = 1;\nif(x == 1){ Console.WriteLine(\"1\"); }").Value

Contrary to CodePrettify, HighlightJS has no line numbering.

After trying both HighlightJS and CodePrettify, personally I prefer the latter. It is simpler, but it feels more intelligent, it has line numbering, and you can easily specify with css classes which parts should be highlighted. If you haven’t heard about CodePrettify, but you would like to check it out, I have written an article about it.