Blazor Markdown

A Blazor Markdown component that enables you to include Markdown files in your server-side Blazor apps.

Why?

Static content in Blazor means writing HTML. Yikes! Markdown source files are easier to read, write, and update when compared to HTML. Sounds good eh?

No longer will <pre><code> content be weirdly indented or heavily escaped. Gone are the days of misusing the <br> tag.

Get started

Install the NuGet package into your server side Blazor project.

PM> Install-Package BlazorMarkdown

$ dotnet add package BlazorMarkdown

Add the following to your _Imports.razor

@using BlazorMarkdown

Usage

The Markdown component takes the path to a Markdown file in the FilePath parameter. The component will convert the Markdown file to HTML in place of the component.

<Markdown FilePath="wwwroot/markdown-file.md" />

Tip: 💡 If you put your Markdown files outside of the wwwroot folder then you need to ensure they are copied to the output directory (select properties on the file from within Visual Studio).

Additional options

Blazor Markdown uses Markdig under the hood. Markdig has different extensions that you can configure. For this reason the Pipeline property is overridable on the Markdown component.

public class MyCustomComponent : Markdown
{
    public override MarkdownPipeline Pipeline => new MarkdownPipelineBuilder()
        // Your chosen extensions here.
        .Build();
}

<MyCustomComponent FilePath="wwwroot/markdown-file.md" />

By default, Blazor Markdown uses all extensions except the BootStrap, SmartyPants and soft line as hard line breaks extensions.