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: 2 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 (2 months ago)
- Default Branch: master
- Last Pushed: 2025-04-14T15:49:35.000Z (2 months ago)
- Last Synced: 2025-04-15T15:16:26.238Z (2 months ago)
- Topics: blazor, blazor-server, blazor-webassembly, csharp, markdig, markdig-renderer, markdown, mudblazor, netcore
- Language: C#
- Homepage:
- Size: 37.1 KB
- Stars: 0
- 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 integration
If you want to render `MathInline`, you need to [install KaTeX](https://katex.org/docs/browser) in your app.
Add this to `` element.
```html
```
Also, you need to add this to bottom of `` element.
```html
```
### 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 `MathInline` and `CodeBlock` 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.