AugusteVN.Razor.PrismJS 1.0.3

Prism.js in Razor

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

Razor Components

Encapsulating components 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.