AugusteVN.PrismJs.Razor 1.0.0

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.

<ImportPrism /> 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 OnPrismImported 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 <ImportPrism /> 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. Enable inlineStyles to apply the Prism theme styling inline on the result of the highlighted HTML-string this can be useful for constructing HTML emails.

Usage Example

@inject IJSRuntime JsRuntime

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

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

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