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.

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.

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. If you have multiple CodeSnippet in the same pag, you can avoid to load multiple times the highlight.js setting to false the parameter LoadMainScript.

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

• 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