Blazor WebAssembly App - Markdig - Can not render Pipe tables or Grid tables in Markdown

user_3850405 0
Viewed 490

I have the following code in my editor:

@page "/editor"
@using Markdig;

<div class="row">
    <div class="col-6">
        <textarea class="form-control" @bind-value="Body" @bind-value:event="oninput"></textarea>
    </div>
    <div class="col-6">
        @if (!string.IsNullOrWhiteSpace(Body))
        {
            @((MarkupString)Preview)
        }
    </div>
</div>

@code {
    public string Body { get; set; }

    public string Preview => Markdown.ToHtml(Body);
}

It works really well with everything except tables. I have tried both pipe and grid tables that should be supported but I can't get them to render. What am I doing wrong?

https://github.com/xoofx/markdig

https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/PipeTableSpecs.md

https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/GridTableSpecs.md

Markdown:

# Header

Text
- List item 1
- List item 2

+---------+---------+ 
| This is | a table | 

a | b
-- | -
0 | 1

Pipe table works here on SO:

a b
0 1

enter image description here

blazor-webassembly blazor markdown c#
1 Answers

If you look at the docs for these tables, you'll notice that they are both referred to as extensions. By default, MarkDig does not process extensions, so you'll have to enable them yourself. The way to do that is to create and store a reference to an instance of MarkdownPipeline:

pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();

Then when calling .ToHtml, you simply pass in the pipeline as the second parameter:

Markdown.ToHtml(Body, pipeline);

How and where you decide to store this instance is up to you, of course.

user_1899500
Related