Make a Code Snippet component in Blazor using Highlight JS
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’s magic with them.
The CodeSnippet Component
Now for the easy part, the Blazor component. Here is the code.
After looking at the markup, you can see that things are quite simple. We’re using
@Language as a parameter and defaulting that to
csharp since that is what I mostly use the component for myself.
@childContent RenderFragment is where the code we put in our snippet component will be placed. The
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.