AugusteVN.PrismJs.Razor
1.0.0
dotnet add package AugusteVN.PrismJs.Razor --version 1.0.0
NuGet\Install-Package AugusteVN.PrismJs.Razor -Version 1.0.0
<PackageReference Include="AugusteVN.PrismJs.Razor" Version="1.0.0" />
paket add AugusteVN.PrismJs.Razor --version 1.0.0
#r "nuget: AugusteVN.PrismJs.Razor, 1.0.0"
// Install AugusteVN.PrismJs.Razor as a Cake Addin #addin nuget:?package=AugusteVN.PrismJs.Razor&version=1.0.0 // Install AugusteVN.PrismJs.Razor as a Cake Tool #tool nuget:?package=AugusteVN.PrismJs.Razor&version=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 =>
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 =>
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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.0.0 | 91 | 10/10/2024 |
Rename NuGet package.