Syntax highlight code snippets in Episerver - Part 2: Styles and language support

By: Tomas Hensrud Gulla
Published:
optimizely

After completing part 1, setting up syntax highlighting with the bare minimum, it's time to let your code shine.

Step 1: Decide on a Style

Highlight.js has 95 different styles, or themes. Find one that you like, and adjust the link to the CSS file with the name of the style. I like Tomorrow Night Bright.

<link rel="stylesheet"
   href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night-bright.min.css">

Step 2: Customize language dropdown

The dropdown list with languages in TinyMCE can be customized like this:

var codeSamplesSettings = new Dictionary<string, object>
{
    { "codesample_languages", new object[]
        {
            new { text = "C#", value = "csharp" },
            new { text = "CSS", value = "css" },
            new { text = "HTML", value = "html" },
            new { text = "JavaScript", value = "javascript" },
            new { text = "JSON", value = "json" },
            new { text = "Plaintext (no label)", value ="plaintext"},
            new { text = "Razor CSHTML", value ="razor" },
            new { text = "SQL", value = "sql" },
            new { text = "WebForms", value = "xhtml" },
            new { text = "XML", value = "xml" },
            new { text = "YAML", value = "yaml" }
        }
    }
};

config.Default()
   .AddPlugin("codesample")
   .Toolbar("codesample")
   .RawSettings(codeSamplesSettings);

A complete list of supported languages can be found on GitHub. Some languages, like Razor CSHTML require a separate package. Additional packages have to be loaded like this, before you call the init method.

hljs.registerLanguage('cshtml-razor', window.hljsDefineCshtmlRazor);