Code Snippet component for Blazor

November 24, 2021January 26, 2022Enrico

Today I want to show you how to create a Code Snippet component forBlazor using highlight.js. Highlight.js is a syntax highlighting tool that is available for 191 different languages with 97 different styles. It works very well and the styles are great and it helps making this component extraordinarily simple.

I created a new component and you find all details on thispost.

Initializing the Javascript

First, we are going to need to do is setup the JavaScript. Highlight.js lets you include just the languages you need and for this we’re going to be using C#. Because of how Blazor renders, we’re also going to need a function we call in theOnAfterRenderAsync overload of our component. Here is the code with some context to see where I added the scripts.

<body>    <app>Loading...</app>    <div id="blazor-error-ui">        An unhandled error has occurred.        <a href="" class="reload">Reload</a>        <a class="dismiss">🗙</a>    </div>    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/languages/csharp.min.js"></script>    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/languages/css.min.js"></script>    <script>        window.highlightSnippet = function(){            document.querySelectorAll('pre code').forEach((el)=>{                hljs.highlightBlock(el);            });        }    </script>    <script src="_framework/blazor.webassembly.js"></script></body>

As you can see, I added the highlight.js script, the C# language file and the CSS needed to put it all together. All the function I created does is tell highlight.js to find all the html tags I want to highlight and do it is magic with them.

The CodeSnippet Component

Now for the easy part, the Blazor component. Here is the code.

<pre class="code"><code class="@Language">@ChildContent</code></pre>@code {    [Inject] private IJSRuntime _js { get; set; }            [Parameter] public RenderFragment ChildContent { get; set; }    [Parameter] public string Language { get; set; } = "csharp";    protected override async Task OnAfterRenderAsync(bool firstRender)    {        await _js.InvokeVoidAsync("highlightSnippet");    }}

After looking at the markup, you can see that things are quite simple. We are using @Language as a parameter and defaulting that to csharp since that is what I mostly use the component for myself. The @childContent RenderFragment is where the code we put in our snippet component will be placed. The OnAfterRenderAsync overload is invoking our javascript function telling highlight.js to find our code and highlight it. It is as easy as that!

You can also add a splash of your own CSS to make things a little prettier. Here is an example of how you could use the component, and the result from the page.

The value forLanguage is the one of the supported languages and you find the list of thispage.

A working example of this Code Snippet component for Blazor is available on mywebsite forDataTable.