Rendering raw/unescaped HTML in Blazor

By default, everything you write in a Razor file is escaped to prevent injection attacks. This keeps your application safe by default. However, some use cases require rendering a dynamically generated HTML string as-is. For example, you might convert a Markdown string to HTML and render the result.

Blazor provides the MarkupString type to indicate that a string is already HTML-encoded. You can create a MarkupString using the new keyword or an explicit cast:

var html = "<strong>meziantou.net</strong>";

var markupString1 = new MarkupString(html);
var markupString2 = (MarkupString)html;

Here's how to implement a Markdown component using Blazor and Markdig. Markdig converts a Markdown string to HTML. Using a MarkupString, you can render the output without Blazor encoding it.

@* convertedMarkdown is a MarkupString so it won't be encoded *@
@convertedMarkdown

@code{
    // Use MarkupString type to prevent Blazor from using HtmlEncoder.Encode
    private MarkupString convertedMarkdown;

    [Parameter]
    public string Text { get; set; }

    protected override void OnParametersSet()
    {
        // Required Markdig https://www.nuget.org/packages/Markdig/
        var html = Markdig.Markdown.ToHtml(Text ?? "");
        convertedMarkdown = (MarkupString)html; // or new MarkupString(html)
    }
}

<Markdown Text="**Demo raw HTML** by [meziantou](https://www.meziantou.net)" />

Do you have a question or a suggestion about this post? Contact me!