Repository files navigation

This is a Blazor component to show code in a nice way usinghighlight.jsBlazor WebAssembly andBlazor Server.The component is usinghighlight.js.

In yourIndex.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 CodeSnippet tag, you have to add the code you want to show. This is the code.

<CodeSnippet Language="Language.csharp">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 ofAndroid Studio. You have to replace special characters like < (&lt;) with the corrispondent HTML code.If you have multipleCodeSnippet in the same pag, you can avoid to load multiple times thehighlight.js setting tofalse the parameterLoadMainScript.

<CodeSnippet Language="Language.xml" 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