We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to convert Markdown string to HTML using Blazor Rich Text Editor?

Platform: Blazor |
Control: Rich Text Editor

Markdown editor to HTML

Blazor Markdown Editor is an intuitive and light-weight component that provides option for md to HTML conversion. It allows the content to be in the markdown format. The typed markdown syntax content can be previewed using a third-party plugin. The Blazor Rich Text Editor Component can be used as a Blazor WYSIWYG Markdown Editor (md editor).

In this knowledge base, we are going to integrate the Markdig third-party library into our Blazor Rich Text Editor’s Markdown editor (MD editor) to preview the Markdown.

What is Markdig?

Markdig is one of the fastest third-party libraries for parsing and converting Markdown plain text to HTML string. For more information, please go through this Markdig GitHub link.

Create a Blazor server-side application

First, create a Blazor server-side application and configure the Syncfusion Blazor services.

Configure the Blazor Rich Text Editor’s Markdown editor

Enable the Syncfusion Blazor Rich Text Editor to function as a Markdown editor:

  1. Set the EditorMode as EditorMode.Markdown.
    <SfRichTextEditor EditorMode="EditorMode.Markdown">
    </SfRichTextEditor>
    

 

  1. Then, set the SaveInterval to 1 to convert and trigger the ValueChange event every second.
    <SfRichTextEditor SaveInterval="1" EditorMode="EditorMode.Markdown" Height="100%" @bind-Value="@mdValue">
          ……
          …….
    </SfRichTextEditor>
    

 

  1. Configure the most-used toolbar items like Bold and Italic for the SfRichTextEditor Markdown editor.
    private List<ToolbarItemModel> tools = new List<ToolbarItemModel>()
    {
         new ToolbarItemModel() { Command = ToolbarCommand.Bold },
         new ToolbarItemModel() { Command = ToolbarCommand.Italic },
         new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough },
         new ToolbarItemModel() { Command = ToolbarCommand.SubScript },
    …..
     };
    

 

  1. Then, render the Markdown editor.
    <SfRichTextEditor SaveInterval="1" EditorMode="EditorMode.Markdown" Height="100%" @bind-Value="@mdValue">
       <RichTextEditorEvents ValueChange="onValueChange"></RichTextEditorEvents>
       <RichTextEditorToolbarSettings Items="@tools" Type="ToolbarType.MultiRow"></RichTextEditorToolbarSettings>
    </SfRichTextEditor>
    

 

Render another Rich Text Editor in the right side to preview the Markdown editor without a toolbar.

<SfRichTextEditor Readonly="true" Height="100%" @bind-Value="@htmlValue">
   <RichTextEditorToolbarSettings Enable="false"></RichTextEditorToolbarSettings>
</SfRichTextEditor>

 

Add the Markdig library

To import the Markdig namespace, install the Markdig NuGet package in your application as shown.

Note:

dotnet add package Markdig --version 0.22.0

 

Show live preview

Convert the Rich Text Editor’s Markdown plain text to HTML string using the Markdig library. Then, bind the resultant HTML string to the Rich Text Editor Markdown preview on the right side to preview the HTML content.

private MarkdownPipeline pipeline { get; set; }
 private string htmlValue { get; set; }
 protected override void OnInitialized()
 {
    pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
    this.htmlValue = Markdig.Markdown.ToHtml(mdValue, pipeline);
    base.OnInitialized();
 }

 

Convert the Markdown plain text to HTML string in the ValueChange event of the left-side Rich Text Editor.

private void onValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args)
    {
        if (args.Value == null)
        {
            this.htmlValue = null;
        }
        else
        {
            this.htmlValue = Markdig.Markdown.ToHtml(args.Value, pipeline);
        }
    }

 

Live preview of markdown in Blazor

Conclusion

I hope you enjoyed learning about how to convert Markdown string to HTML using Blazor Rich Text Editor? You can explore the runnable sample of md to html convertor for blazor from this GitHub location.

You can refer to our Blazor Rich Text Editor’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to understand how to present and manipulate data. 

For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Blazor Rich Text Editor and other Blazor components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

ADD COMMENT
You must log in to leave a comment
Comments
Muqofa
Nov 07, 2021

OK

**_

### code text here
_**
Reply
daven murphy
Mar 30, 2022

dsa

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile