https://github.com/ramtype0/markdig.renderers.mudblazor
Markdown renderers for Blazor and MudBlazor.
https://github.com/ramtype0/markdig.renderers.mudblazor
blazor blazor-server blazor-webassembly csharp markdig markdig-renderer markdown mudblazor netcore
Last synced: 6 months ago
JSON representation
Markdown renderers for Blazor and MudBlazor.
- Host: GitHub
- URL: https://github.com/ramtype0/markdig.renderers.mudblazor
- Owner: RamType0
- License: mit
- Created: 2025-04-12T04:11:17.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-05-16T15:07:24.000Z (7 months ago)
- Last Synced: 2025-05-16T16:23:37.265Z (7 months ago)
- Topics: blazor, blazor-server, blazor-webassembly, csharp, markdig, markdig-renderer, markdown, mudblazor, netcore
- Language: C#
- Homepage:
- Size: 215 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/RamType0.Markdig.Renderers.MudBlazor/)
[](https://www.nuget.org/packages/RamType0.Markdig.Renderers.MudBlazor/)
# Markdown renderers for Blazor and [MudBlazor](https://github.com/MudBlazor/MudBlazor)
## Getting started
### [KaTeX](https://github.com/KaTeX/KaTeX) integration
If you want to render `MathInline`, you need to do following steps.
#### [Install KaTeX](https://katex.org/docs/browser) in your app
Add this to `` element.
```html
```
### Add `KatexExtension` to `MarkdownPipelineBuilder`
```C#
using Markdig.Renderers.RazorComponent.Katex;
pipelineBuilder.UseKatex();
```
### [Vega-Embed](https://github.com/vega/vega-embed) integration
If you want to render Vega and Vega-Lite charts, you need to do following steps.
#### Add `VegaEmbedExtension` to `MarkdownPipelineBuilder`
```C#
using Markdig.Renderers.RazorComponent.Vega.Embed;
pipelineBuilder.UseVegaEmbed();
```
### [Kroki](https://github.com/yuzutech/kroki) integration
If you want to render diagrams supported by Kroki, you need to do following steps.
#### Add `KrokiHttpRequestFactory` to services
```C#
builder.Services.AddKrokiHttpRequestFactory();
```
#### Add `KrokiExtension` to `MarkdownPipelineBuilder`
```C#
using Markdig.Renderers.RazorComponent.Kroki;
pipelineBuilder.UseKroki();
```
### MudBlazor
This library is using [CSS isolation](https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation).
So don't forget to [bundle it](https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation#css-isolation-bundling).
## How to use
### MudBlazor
Use `MudMarkdown` component.
```razor
@using Markdig.Renderers.MudBlazor.Components
```
### Common Blazor
Use `MarkdownDocument.ToRenderFragment` extension method.
```razor
@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.
```C#
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();
razorComponentRenderer.ObjectRenderers.AddIfNotAlready();
razorComponentRenderer.ObjectRenderers.TryRemove();
razorComponentRenderer.ObjectRenderers.AddIfNotAlready();
razorComponentRenderer.ObjectRenderers.TryRemove();
razorComponentRenderer.ObjectRenderers.AddIfNotAlready();
razorComponentRenderer.ObjectRenderers.TryRemove();
razorComponentRenderer.ObjectRenderers.AddIfNotAlready();
razorComponentRenderer.ObjectRenderers.TryRemove();
razorComponentRenderer.ObjectRenderers.AddIfNotAlready();
razorComponentRenderer.ObjectRenderers.TryRemove();
razorComponentRenderer.ObjectRenderers.AddIfNotAlready();
}
}
```
## Robust rendering
There is already existing well-known Markdown integration for MudBlazor, [MudBlazor.Markdown](https://github.com/MyNihongo/MudBlazor.Markdown).
### `MathInline`
[MudBlazor.Markdown has wont-fix issue around rendering `MathInline`](https://github.com/MyNihongo/MudBlazor.Markdown/issues/291).
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](https://github.com/MyNihongo/MudBlazor.Markdown/blob/e9727f76245973915664c6dd75686d2e7358925d/src/MudBlazor.Markdown/Components/MudCodeHighlight.razor.cs#L132).
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](https://github.com/yuzutech/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.
```razor
```