An open API service indexing awesome lists of open source software.

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: about 2 months ago
JSON representation

Markdown renderers for Blazor and MudBlazor.

Awesome Lists containing this project

README

        

[![Version](https://img.shields.io/nuget/v/RamType0.Markdig.Renderers.MudBlazor?logo=nuget&style=flat-square)](https://www.nuget.org/packages/RamType0.Markdig.Renderers.MudBlazor/)
[![Nuget downloads](https://img.shields.io/nuget/dt/RamType0.Markdig.Renderers.MudBlazor?label=nuget%20downloads&logo=nuget&style=flat-square)](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.