RamType0.Markdig.Renderers.RazorComponent 0.2.0-alpha

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
This is a prerelease version of RamType0.Markdig.Renderers.RazorComponent.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package RamType0.Markdig.Renderers.RazorComponent --version 0.2.0-alpha
                    


                    

                
NuGet\Install-Package RamType0.Markdig.Renderers.RazorComponent -Version 0.2.0-alpha
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.RazorComponent" Version="0.2.0-alpha" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="RamType0.Markdig.Renderers.RazorComponent" Version="0.2.0-alpha" />
                    


                            Directory.Packages.props
                        

                    

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


                            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.RazorComponent --version 0.2.0-alpha
                    


                    

                
#r "nuget: RamType0.Markdig.Renderers.RazorComponent, 0.2.0-alpha"
#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.RazorComponent&version=0.2.0-alpha&prerelease
                    


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

                    

                
#tool nuget:?package=RamType0.Markdig.Renderers.RazorComponent&version=0.2.0-alpha&prerelease
                    


                            Install RamType0.Markdig.Renderers.RazorComponent 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 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">

Also, you need to add this to bottom of <body> element.

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" integrity="sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6" crossorigin="anonymous"></script>

Kroki (mermaid, nomnoml) intefration

If you want to render mermaid and nomnoml diagrams, you need to add KrokiClient to services.


builder.Services.AddKrokiClient();

Also, you need to call UseKroki on 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.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  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 (4)

Showing the top 4 NuGet packages that depend on RamType0.Markdig.Renderers.RazorComponent:

Package Downloads
RamType0.Markdig.Renderers.MudBlazor

Markdown renderers for MudBlazor.
RamType0.Markdig.Renderers.RazorComponent.Katex

Katex integration for Markdown renderers for Blazor.
RamType0.Markdig.Renderers.RazorComponent.Vega.Embed

Vega-Embed integration for Markdown renderers for Blazor.
RamType0.Markdig.Renderers.RazorComponent.Kroki

Kroki integration for Markdown renderers for Blazor.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.11.0 244 5/8/2025
0.10.3 140 5/7/2025
0.10.2 138 5/7/2025
0.10.0 149 5/7/2025
0.9.0 141 5/5/2025
0.8.0 73 5/3/2025
0.7.0 72 5/3/2025
0.6.0 149 5/1/2025
0.5.0 144 5/1/2025
0.4.0 140 4/30/2025
0.3.0 144 4/30/2025
0.2.1-alpha 150 4/28/2025
0.2.0-alpha 148 4/28/2025
0.1.0-alpha 82 4/12/2025