RamType0.Markdig.Renderers.MudBlazor 0.11.0

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher. 
dotnet add package RamType0.Markdig.Renderers.MudBlazor --version 0.11.0
                    


                    

                
NuGet\Install-Package RamType0.Markdig.Renderers.MudBlazor -Version 0.11.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="RamType0.Markdig.Renderers.MudBlazor" Version="0.11.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="RamType0.Markdig.Renderers.MudBlazor" Version="0.11.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="RamType0.Markdig.Renderers.MudBlazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add RamType0.Markdig.Renderers.MudBlazor --version 0.11.0
                    


                    

                
#r "nuget: RamType0.Markdig.Renderers.MudBlazor, 0.11.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#addin nuget:?package=RamType0.Markdig.Renderers.MudBlazor&version=0.11.0
                    


                            Install RamType0.Markdig.Renderers.MudBlazor as a Cake Addin
                        

                    

                
#tool nuget:?package=RamType0.Markdig.Renderers.MudBlazor&version=0.11.0
                    


                            Install RamType0.Markdig.Renderers.MudBlazor as a Cake Tool

Version Nuget downloads

Markdown renderers for Blazor and MudBlazor

Getting started

KaTeX integration

If you want to render MathInline, you need to do following steps.

Install KaTeX in your app

Add this to <head> element.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">

Add KatexExtension to MarkdownPipelineBuilder

using Markdig.Renderers.RazorComponent.Katex;

pipelineBuilder.UseKatex();

Vega-Embed integration

If you want to render Vega and Vega-Lite charts, you need to do following steps.

Add VegaEmbedExtension to MarkdownPipelineBuilder
using Markdig.Renderers.RazorComponent.Vega.Embed;

pipelineBuilder.UseVegaEmbed();

Kroki integration

If you want to render diagrams supported by Kroki, you need to do following steps.

Add KrokiHttpRequestFactory to services

builder.Services.AddKrokiHttpRequestFactory();
Add KrokiExtension to MarkdownPipelineBuilder

using Markdig.Renderers.RazorComponent.Kroki;

pipelineBuilder.UseKroki();

MudBlazor

This library is using CSS isolation.

So don't forget to bundle it.

How to use

MudBlazor

Use MudMarkdown component.

@using Markdig.Renderers.MudBlazor.Components

<MudMarkdown Value="$ e^{i\theta} = \cos\theta + i\sin\theta $" />

Common Blazor

Use MarkdownDocument.ToRenderFragment extension method.


@using Markdig
@using Markdig.Renderers.RazorComponent
@using Microsoft.AspNetCore.Components.Rendering

@GetMarkdownContent()

@code{

    string markdownText = @"
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Paragraph

*Emphasis*
**Emphasis**

> BlockQuote

This is a $math block$

 a     | b
-------|-------
 0     | 1
 2     | 3

";
    RenderFragment GetMarkdownContent()
    {
        var pipelineBuilder = new MarkdownPipelineBuilder().UseAdvancedExtensions();
        var pipeline = pipelineBuilder.Build();
        var markdownDocument = Markdown.Parse(markdownText, pipeline);
        return markdownDocument.ToRenderFragment(pipeline);
    }
}

Customization

Just write extension for RazorComponentRenderer.

Actually, MudBlazor integration is implemented in this way.

public class MudBlazorExtension : IMarkdownExtension
{
    public void Setup(MarkdownPipelineBuilder pipeline)
    {

    }

    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
    {
        if (renderer is not RazorComponentRenderer razorComponentRenderer)
        {
            return;
        }

        razorComponentRenderer.ObjectRenderers.TryRemove<RazorComponent.HeadingRenderer>();
        razorComponentRenderer.ObjectRenderers.AddIfNotAlready<HeadingRenderer>();

        razorComponentRenderer.ObjectRenderers.TryRemove<RazorComponent.ParagraphRenderer>();
        razorComponentRenderer.ObjectRenderers.AddIfNotAlready<ParagraphRenderer>();

        razorComponentRenderer.ObjectRenderers.TryRemove<RazorComponent.ThematicBreakRenderer>();
        razorComponentRenderer.ObjectRenderers.AddIfNotAlready<ThematicBreakRenderer>();

        razorComponentRenderer.ObjectRenderers.TryRemove<RazorComponent.Inlines.AutolinkInlineRenderer>();
        razorComponentRenderer.ObjectRenderers.AddIfNotAlready<AutolinkInlineRenderer>();

        razorComponentRenderer.ObjectRenderers.TryRemove<RazorComponent.Inlines.LinkInlineRenderer>();
        razorComponentRenderer.ObjectRenderers.AddIfNotAlready<LinkInlineRenderer>();

        razorComponentRenderer.ObjectRenderers.TryRemove<RazorComponent.TableRenderer>();
        razorComponentRenderer.ObjectRenderers.AddIfNotAlready<TableRenderer>();
    }
}

Robust rendering

There is already existing well-known Markdown integration for MudBlazor, MudBlazor.Markdown.

MathInline

MudBlazor.Markdown has wont-fix issue around rendering MathInline.

Unlike MudBlazor.Markdown, this library is using KaTeX instead of MathJax and never depends on direct DOM manipulation.

CodeBlock

MudBlazor.Markdown is using highlight.js to manipulate DOM directly.

Unlike MudBlazor.Markdown, this library is using ColorCode instead of highlight.js and never depends on direct DOM manipulation.

Mermaid diagrams

mermaid.js is very difficult to integrate to Blazor because it does terrible DOM manipulation.

This library is using Kroki, and does not depend on mermaid.js directly.

Compatible for LLM apps

Use CascadingCodeBlockOptions.OpenCodeBlockContent to override code block content for Vega-Embed, Kroki open code blocks.

This would be helpful for LLM apps. Open code blocks indicates that the code is imcomplete and rendering them resulted in error.

<CascadingCodeBlockOptions>
    <OpenCodeBlockContent>
        <MudProgressCircular Indeterminate />
    </OpenCodeBlockContent>
    <ChildContent>
        <MudMarkdown Value="@markdownText" Pipeline="@GetPipeline()" />
    </ChildContent>
</CascadingCodeBlockOptions>
Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.11.0 197 5/8/2025
0.10.3 138 5/7/2025
0.10.2 137 5/7/2025
0.10.1 142 5/7/2025
0.10.0 138 5/7/2025
0.9.0 137 5/5/2025
0.8.0 68 5/3/2025
0.7.0 62 5/3/2025
0.6.0 133 5/1/2025
0.5.0 139 5/1/2025
0.4.0 136 4/30/2025
0.3.0 138 4/30/2025
0.2.1-alpha 139 4/29/2025
0.2.0-alpha 142 4/28/2025
0.1.0-alpha 81 4/12/2025