AugusteVN.Razor.PrismJS 1.1.3

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. Optionally includes the prism.css link tag. When scripts loaded, an optional EventCallback OnPrismIncluded is invoked which means it is ready to invoke the highlighting functionality.

<PrismHighlighter /> uses the JSRuntime to invoke Prism.highlightAll at first render of this component's lifecycle method OnAfterRender. This component includes the <IncludePrism /> and uses its EventCallback to know when to fire the Prism.highlightAll.

Usage Example

<pre>
    <code class="language-csharp">app.UseCors(options =&gt;
                options.WithOrigins("https://www.morning-walk.com")
                    .AllowAnyMethod()
                    .AllowAnyHeader());
    </code>
</pre>
        
<PrismHighlighter />

Extension Methods

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

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

ImportCustomPrismJsAsync uses the JSRuntime to import the custom-prism.js script which contains some extra helper methods.

PrismHighlightAllAsync uses the JSRuntime to invoke Prism.highlightAll.

PrismHighlightHtmlStringAsync uses the JSRuntime to invoke CustomPrism.highlightHtmlString with an HTML-string as parameter. Returns the HTML-string properly highlighted.

GetPrismStylesInlined uses the JSRuntime to invoke CustomPrism.getStylesInlined to return the dark Prism theme's CSS inlined in a <style> tag. Useful for constructing HTML emails.

Usage Example

@inject IJSRuntime JsRuntime

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

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

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