HighlightBlazor 0.1.7

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 Highlight.Blazor.

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. Happy to use

C# without Highlight

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

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

C# with indent

        <CodeHighlight>
                private int currentCount = 0;

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

C# without indent

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

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

Json with indent

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

Highlight by program

<CodeHighlight>
    @SourceCode
</CodeHighlight>

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

}

Supported Languages

Same to highlight.js. See here.

You can set language by CodeLanguage property, the default value is csharp.

Supported Styles

You can set different styles by StyleUrl property.

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

<CodeHighlight StyleUrl="@styleUrl">
    private int currentCount = 0;

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

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

    private void ApplyStyle()
    {
        styleUrl = url;
    }
}

Full supported styles list, you can see here.

Indent

By set Indent to false, can show the origin code. Default value is true.