Blazor: Live Preview Markdown Editor’s Content Using Markdig Library
Tags: blazor, webdev, dotnet, csharp
Published: 2021-02-26 05:13:00

---
title: Blazor: Live Preview Markdown Editor’s Content Using Markdig Library
published: true
date: 2021-02-23 11:20:23 UTC
tags: blazor, webdev, dotnet, csharp
canonical_url: https://www.syncfusion.com/blogs/post/blazor-live-preview-markdown-editors-content-using-markdig-library.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/02/Blazor-Live-Preview-Markdown-Editor%E2%80%99s-Content-Using-Markdig-Library-672x372.png
---

Our Syncfusion [Blazor Rich Text Editor component](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) can be used as a Blazor WYSIWYG [Markdown editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor/wysiwyg-markdown-editor). It allows the content to be in the Markdown format. The typed Markdown syntax content can be previewed using any third-party plugin.

In this blog post, we are going to integrate the [Markdig](https://github.com/lunet-io/markdig) third-party library into our Blazor Rich Text Editor’s Markdown editor (MD editor) to preview the Markdown.

The following topics are covered in this blog:

- [Prerequisites](#prequisities)
- [What is Markdig?](#what-is-markdig)
- [Creating a Blazor server application](#create-a-blazor-server-side-application)
- [Configure the Rich Text Editor’s Markdown editor](#configure-the-blazor-rich-text-editors-markdown-editor)
- [Add the Markdig library](#add-the-markdig-library)
- [Show LIVE preview](#show-live-preview)
- [Resources](#resources)
- [Conclusion](#conclusion)

Let’s get started!

## Prerequisites

We are going to demonstrate the application in a Blazor server-side application. So, the following prerequisites are needed:

- [Visual Studio 2019](https://visualstudio.microsoft.com/vs/).
- [.NET Core 3.0 ](https://dotnet.microsoft.com/download/dotnet-core/3.0)or above.
- [Markdig](https://www.nuget.org/packages/Markdig/).

## 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](https://github.com/lunet-io/markdig) GitHub link.

## Create a Blazor server-side application

First, create a Blazor server-side application and configure the Syncfusion Blazor services by referring to the Syncfusion [Getting Started documentation](https://blazor.syncfusion.com/documentation/getting-started/server-side-blazor/) page.

## 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.**
```html
<SfRichTextEditor EditorMode="EditorMode.Markdown">
 </SfRichTextEditor>
```
2. Then, set the SaveInterval to 1 to convert and trigger the ValueChange event every second.
```html
<SfRichTextEditor SaveInterval="1" EditorMode="EditorMode.Markdown" Height="100%" @bind-Value="@mdValue">
      ……
      …….
   </SfRichTextEditor>
```
3. Configure the most-used toolbar items like Bold and Italic for the SfRichTextEditor Markdown editor.
```csharp
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 },
     new ToolbarItemModel() { Command = ToolbarCommand.SuperScript },
     new ToolbarItemModel() { Command = ToolbarCommand.Separator },
     new ToolbarItemModel() { Command = ToolbarCommand.Formats },
     new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
     new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
     new ToolbarItemModel() { Command = ToolbarCommand.Separator },
     new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
     new ToolbarItemModel() { Command = ToolbarCommand.Image },
     new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
     new ToolbarItemModel() { Command = ToolbarCommand.Separator },
     new ToolbarItemModel() { Command = ToolbarCommand.Undo },
     new ToolbarItemModel() { Command = ToolbarCommand.Redo }
 };
```
4. Then, render the Markdown editor.
```html
<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.

```html
<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](https://www.nuget.org/packages/Markdig/) NuGet package in your application as shown.

```cmd
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.

Refer to the following code.

```csharp
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.  
Refer to the following code example.

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

### Output

![Output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Output-1.png)

## Resources

You can check out the complete project from this [GitHub](https://github.com/SyncfusionExamples/blazor-markdown-editor-preview) repository.

## Conclusion

I hope you now have a clear idea on how easy it is to integrate the Markdig library with Syncfusion Blazor [Rich Text Editor’s Markdown editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) and preview Markdown text.

If you are new to Syncfusion, try our control’s features by downloading a [free trial](https://www.syncfusion.com/downloads). You can also explore our [online demo ](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap4)and our [documentation](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started/).

You can contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). We are always happy to assist you!

If you like this post, we think you will also like the following:

- [Data Entry Made Easy with Blazor Multicolumn AutoComplete](https://dev.to/syncfusion/data-entry-made-easy-with-blazor-multicolumn-autocomplete-1h5c) [Blog]
- [How to Deploy a Blazor Application in Azure App Service](https://dev.to/syncfusion/how-to-deploy-a-blazor-application-in-azure-app-service-26j9) [Blog]
- [How to Build a Blazor WASM CRUD Application with Entity Framework](https://dev.to/syncfusion/how-to-build-a-blazor-wasm-crud-application-with-entity-framework-2lm3) [Blog]