PSC.Blazor.Components.CodeSnippet 1.0.2

Code Snippet for Blazor

This is a Blazor component to show code in a nice way using highlight.js Blazor WebAssembly and Blazor Server. The component is using highlight.js.

Usage

In your Index.html or _Host add this line

<script src="/_content/PSC.Blazor.Components.CodeSnippet/codesnippet.js"></script>

Then, in your _Imports.razor add this line

@using PSC.Blazor.Components.CodeSnippet

Based on the parameters, the component adds automatically the required scripts and CSS in your page.

Add a CodeSnippet

For example, I want to add a C# code with the *Visual Studio Style. Between the CodeSippet tag, you have to add the code you want to show. This is the code.

<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio">
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await _js.InvokeVoidAsync("loadJs", targetUrl);
}
</CodeSnippet>

Then, I want to add a new CodeSnippet using XML and the style of Android Studio. You have to replace special characters like < (&lt;) with the corrispondent HTML code.

<CodeSnippet Language="Language.xml" Style="Style.AndroidStudio" LoadMainScript="false">
&lt;CodeSnippet Language="Language.xml">
&lt;/CodeSnippet>
</CodeSnippet>

Supported languages

Supported style

Examples

CSharp (Visual Studio style)

Java (Android Studio style)

Swift (XCode style)

Other Blazor components

More examples and documentation

• Write a reusable Blazor component
• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Modal Dialog component for Blazor
• Create Tooltip component for Blazor
• Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs