Customizing Markdown Syntax in Blazor Markdown Editor Component

19 Mar 20251 minute to read

The Rich Text Editor allows you to customize the markdown syntax by overriding its default syntax. Configure the customized markdown syntax using RichTextEditorMarkdownOptions.ListSyntax, RichTextEditorMarkdownOptions.FormatSyntax, RichTextEditorMarkdownOptions.SelectionSyntax properties.

Defining Custom Markdown Formatting

You can define custom symbols for different Markdown formatting options:

• Use + for unordered lists instead of -.
• Use __text__ for bold text instead of **text**.
• Use _text_ for italic text instead of *text*.

The following example demonstrates how to customize Markdown tags in the editor:

CSHTML

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor Height="250px" EditorMode="EditorMode.Markdown" Value="@MarkdownValue">
    <RichTextEditorMarkdownOptions ListSyntax="@ListSyntax" FormatSyntax="@FormatSyntax" SelectionSyntax="@SelectionSyntax" />
</SfRichTextEditor>

@code{

    private string MarkdownValue = "The sample is configured with customized markdown syntax using the [RichTextEditorMarkdownOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html).\n    Type the content and click the toolbar item to view customized markdown syntax.\n    + To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";
    
    private Dictionary<string, string> ListSyntax { get; set; } = new Dictionary<string, string>()
    {
        { "UL", "+ " }
    };
    private Dictionary<string, string> FormatSyntax { get; set; } = new Dictionary<string, string>()
    {
        { "Blockquote", "> " }
    };
    
    private Dictionary<string, string> SelectionSyntax { get; set; } = new Dictionary<string, string>()
    {
        { "Bold", "__" },
        { "Italic", "_" }
    };
}