Highlight.Blazor

Syntax highlighting for Blazor, based on highlight.js

Build	NuGet

How to use

You can install the package via the NuGet package manager just search for HighlightBlazor.

1. Add Imports

Add the following to your _Imports.razor

@using HighlightBlazor

2. Add reference to style sheet(s)

Add the following line to the head tag of your _Host.cshtml (Blazor Server app) or index.html (Blazor WebAssembly).

<link href="_content/HighlightBlazor/highlight-blazor-styles.css" rel="stylesheet">
<script src="_content/HighlightBlazor/highlight-blazor.js"></script>

These files include the js and default style of highlight.js.

3. Add Serivce (optional)

You need to register the highlight services if you want to set the code style.

builder.Services.AddHighlight();

4. Happy to use

4.1 C# code without Highlight

<pre>
    <code>
                private int currentCount = 0;

                private void IncrementCount()
                {
                    currentCount++;
                }
    </code>
</pre>

4.2 C# code with indent

        <CodeHighlight>
                private int currentCount = 0;

                private void IncrementCount()
                {
                    currentCount++;
                }
        </CodeHighlight>

4.3 C# code without indent

        <CodeHighlight Indent="false">
                private int currentCount = 0;

                private void IncrementCount()
                {
                    currentCount++;
                }
        </CodeHighlight>

4.4 Json with indent

        <CodeHighlight Indent="true" CodeLanguage="json">
                    {
	                    "success": true,
	                    "data": [
		                    {
			                    "billCode": "BSTPU019524859",
			                    "type": 1
		                    }
	                    ]
                    }
        </CodeHighlight>

4.5 Highlight by program

<CodeHighlight>@SourceCode</CodeHighlight>

@code {
    string SourceCode = @"
    public class Aa
    {
    
    }
";

}

👀NOTE: <CodeHighlight>@SourceCode</CodeHighlight> and
<CodeHighlight>
	@SourceCode
</CodeHighlight>
has different render effects. The second one causes more blanks and empty lines.

4.6 Change the code in program

<CodeHighlight Code=@AnotherCode></CodeHighlight>

private void ChangeCode()
{
    Random r = new Random();
    AnotherCode = "public override void init_" + r.Next(0,100) + "()\n{\n   Backend.Init();\n}";
}

Use Code=@AnotherCode instead of <CodeHighlight>@AnotherCode</CodeHighlight>, or it won't render immediately.

5. Supported Languages

Same to highlight.js. See here.

You can set language by CodeLanguage property, the default is empty, it means auto detect.

6. Supported Code Styles

You can set different styles by HighlightService.

@inject HighlightService highlightSrv

<div>
    <input type="text" @bind-value="styleUrl" style="width:700px" />
</div>

<button class="btn btn-primary" @onclick="ApplyStyle">Apply Style</button>

@code {
    private string styleUrl = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/a11y-dark.min.css";

    private void ApplyStyle()
    {
        highlightSrv.SetStyleAsync(styleUrl);
    }
}

Full supported styles list, you can see here.

7. Indent

By set Indent to false, it can display the origin code. Default is true.

Guyiming/Highlight.Blazor