AugusteVN.Razor.PrismJS 1.1.2

Prism.js in Razor

The Prism.js syntax highlighter for HTML code blocks, encapsulated in Razor components.

Razor Components

The encapsulating components below, can be implemented on Razor pages or components.

<IncludePrism /> uses the JSRuntime to import the prism.js script at first render of this component's lifecycle method OnAfterRender. And loads the prism.css link tag. I recommend to place this near the top of your Razor page or component.

<PrismHighlighter /> uses the JSRuntime to invoke Prism.highlightAll at first render of this component's lifecycle method OnAfterRender. I recommend to place this near the bottom of your Razor page or component, after the target code blocks and not before the <IncludePrism />.

Usage Example

<IncludePrism />

<div>
    @BlogPost.Body
</div>
    
<PrismHighlighter />

Extension Methods

To invoke importing prism.js using the JSRuntime or to invoke Prism.highlightAll yourself, I included 2 extension methods.

InvokeImportPrismJsAsync uses the JSRuntime to import the prism.js script.

InvokePrismHighlightAllAsync uses the JSRuntime to invoke Prism.highlightAll.

Usage Example

@inject IJSRuntime JsRuntime

<textarea @onblur="HandleOnChange"></textarea>

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Task.Run(() => JsRuntime.InvokeImportPrismJsAsync());
        }
    }
    
    private void HandleOnChange(FocusEventArgs e)
    {
        Task.Run(() => JsRuntime.InvokePrismHighlightAllAsync());
    }
}

To see it in action, watch: Markdown to HTML with C# .NET.