I looked at a couple of other CMS sites which published some of their code to view on their sites and discovered that many seem to use Prismjs for syntax highlighting.

Prismjs provides token based syntax highlighting by parsing the code using JavaScript. It is possible to select on the Prismjs website which languages are to be used and then do a couple of downloads to get the requisite CSS  and JS files. Alternatively, the whole lot can be taken, which would result in a huge file, or have the JavaScript automatically download the CSS required from a CDN. I took the first option and then overrode a couple of the classes in my CSS file to make the font size a bit smaller.

I did discover a small “feature” which is more Blazor related: I noticed that the code wasn’t rendering properly and was looking for a solution and then I noticed that if I refreshed the page it did render and then unrendered. A quick bit of Googling and from StackOverflow.com, I found that an extra line of JavaScript to call the "highlightCode" method was required. A quick addition  to the AfterRender method on all pages requiring the display of formatted code and it worked perfectly.

Blazor plays nicely with JavaScript through the JSRuntime service, requiring it to be added to the builder services in  Program.cs and then some extension methods to be added to call the JavaScript. A simple call to the JSruntime in the page and the JavaScript is run and the code formatted.

I have created a bunch of IJSRuntime extensions for various JavaScript calls and this is an example:

public static async ValueTask ShowPrism(this IJSRuntime JSRuntime)
​{
    await JSRuntime.InvokeVoidAsync("highlightCode");
​}

This runs a JavaScript function:

window.highlightCode = () => window.Prism.highlightAll();

Then in the  OnAfterRenderAsync method on the page, the extension method is called to invoke the JavaScript method

protected async override Task OnAfterRenderAsync(bool firstRender)
​{
    ​await JsRuntime.ShowPrism();
​}

On my editor page, I had a slightly different challenge. I wanted to show a preview of the post below the editor. However, when I called Prism's highlightAll function, it formatted the code in the editor too. All well and good, but it also changed the saved text to the rendered version rather than the raw, making editing the code a little more challenging. I found a different function highlightAllUnder

function highlightPreview() {
	var el = document.getElementById('PreviewPost');
	if (typeof (el) != 'undefined' && el != null) {
		Prism.highlightAllUnder(el)
	}
}

This looks for the element "PreviewPost" in the code and then performs the highlighting on that element and its children only. I added a further IJSRuntime extension to call this code and used it in the OnAfterRenderAsync method on the Editor page.