Markdown in the ASP.NET MVC Rich Text Editor Control

4 Mar 202524 minutes to read

When you format the word in Markdown format, you should add Markdown syntax to the word to indicate the words and phrases that look different from each other.

The Rich Text Editor supports Markdown editing when the EditorMode is set to markdown. You can apply formatting to text using both keyboard interactions and toolbar actions.

Markdown Basic Formatting

The ASP.NET MVC Markdown editor supports various commands to format markdown content. Below are the supported commands and their usage:

Commands	Syntax	Description
Bold	Sample content for ``bold text``.	For bold, add `**` or `__` to front and back of the text.	For order list, precede each line with a number.
Italic	Sample content for ``Italic text``.	For Italic, add `*` or `_` to front and back of the text.
Bold and Italics	Sample content for `*`bold and Italic text`*`.	For bold and Italics, add `***` to the front and back of the text.
Heading 1	`#` Heading 1 content	For heading 1, add `#` to start of the line.
Heading 2	`##` Heading 2 content	For heading 2, add `##` to start of the line.
Heading 3	`###` Heading 3 content	For heading 3, add `###` to start of the line.
Heading 4	`####` Heading 4 content	For heading 4, add `####` to start of the line.
Heading 5	`#####` Heading 5 content	For heading 5, add `#####` to start of the line.
Heading 6	`######` Heading 6 content	For heading 6, add `######` to start of the line.
Line Break	First line `<br>`Second line	For line break, press enter two times (or) add `<br>` in between the first and the second line.
Blockquotes	`>` Blockquotes text	For blockquotes, add `>` to start of the line.
Strike Through	Sample content for `~~`strike through text`~~`.	For strike through, add `~~` to front and back of the text.
Code (Single line)	`Single line code`	For single line code, add ` to front and back of the text.
Code block (Multi Line)	``` Multi line code text Multi line code text ```	For multiple line code, add ``` in the new line before and after the content.
Subscript	`<sub>`Subscript text`</sub>`	For subscript, add `<sub>` to the front and `</sub>` to the back of the text.
Superscript	`<sup>`Superscript text`</sup>`	For superscript, add `<sup>` to the front and `</sup>` to the back of the text.
Ordered List	`1.` First `1.` Second	For ordered list, preceding one or more lines of text with `1.`
Unordered List	`` First `` second	For unordered list, preceding one or more lines of text with `*`.
Links	Link text without title text `[` Link text `](`URL`)` Link text with title text `[` Link text `](`URL , “title text”`)`	Create an inline link by wrapping link text in brackets `[ ]`, and then wrapping the URL as first parameter and title as second parameter in the parentheses `()`. Note: The title text is optional, if needed it can be given manually.
Table	`\| Heading 1 \| Heading 2 \|<br>\|---------\|---------\|<br>\| Col A1 \| Col A2 \|<br>\| Col B1 \| Col B2 \|`	Create a table using the pipes and underscores as given in the syntax to create 2 x 2 table.
Horizontal Line	`***` (three asterix in new line) (or) `___` (three underscores in new line)	For horizontal line, add `***` or `___` to the start of the new line.
Image	`![alt text](`URL path`)`	Create an image by wrapping the image source in parentheses `()`.
Image with alternate text	`![alt text](`URL path`)`	Create an image with alternate text by wrapping an alternative text in brackets `[]`, and then link of the image source in parentheses `()`. Note: When inserting the image using toolbar, the alternate text cannot be provided that needs to be given manually.
Escape tick marks supported	Sample text content with ``bold and ``not bold`` text can be in the same line.``	In the syntax, the whole content is made as bold where the content `not bold` can be made as normal text by adding the bold syntax to the start and end of the respective text. Likewise you can do the same for various inline commands.
Escape Character	`\(`any syntax`)`	Escape any markdown syntax by prefix `\` to the syntax. Example: `\`Bold text``
HTML Entities	Copyright: © - `©` Trade mark: ™ - `™` Registered: ® - `®` Ampersand: & - `&` Less than: < - `<` Greater than: > - `>`	For HTML entities, add & and ; to the front and back of the respective entities.

The above listed commands are the only ones supported in the Syncfusion ^® Markdown editor. For other commands, use HTML tags within the Markdown editor. Additionally, footnotes, definitions, math, and checklist Markdown syntax are not supported.

Insert table

Add the CreateTable item to the toolbar items to use the table tool.

To insert a table in the Markdown editor, click the insert table icon in the toolbar. By default, the inserted Markdown table includes 2 rows and 2 columns, along with a heading.

CSHTML
Controller.cs
@using Syncfusion.EJ2.RichTextEditor

<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").EditorMode(EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        var id = defaultRTE.getID() + 'html-preview';
        htmlPreview = defaultRTE.element.querySelector('#' + id);
        if (mdsource.classList.contains('e-active')) {
            mdsource.classList.remove('e-active');
            mdsource.parentElement.title = 'Preview';
            textArea.style.display = 'block';
            textArea.style.width = '100%';
            htmlPreview.style.display = 'none';
        } else {
            mdsource.classList.add('e-active');
            if (!htmlPreview) {
                htmlPreview = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.type === 'preview') {
                textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
            } else {
                htmlPreview.classList.remove('e-pre-source');
                textArea.style.width = '50%';
            }
            htmlPreview.style.display = 'block';
            markDownConversion();
            mdsource.parentElement.title = 'Code View';
        }
    }
</script>
<style>
    .e-richtexteditor textarea.e-content {
        float: left;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }

    .e-richtexteditor .e-rte-content .e-content {
        min-height: 150px;
    }

    .e-richtexteditor .e-rte-content {
        overflow: hidden;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .e-rte-content .e-content {
        float: right;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            tooltipText = "Preview",
            template = "<button id='preview-code' class='e-tbar-btn e-control e-btn e-icon-btn'>" +
"<span class='e-btn-icon e-md-preview e-icons'></span></button>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
and phrases should look different from each other.

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We can add our own custom formation syntax for the Markdown formation.

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}

Insert image

Add the Image item to the toolbar to enable the image tool.

To insert an image in the Markdown editor, follow these steps:

Click the Insert Image icon in the toolbar.
Browse and select an image from your local machine by clicking the browse button, or enter an image link from an online source.
Click the Insert button in the image dialog.

The selected image will be added to the editor area.

Please refer to the sample and code snippets below to add the image in the Markdown editor.

CSHTML
Controller.cs
@using Syncfusion.EJ2.RichTextEditor

<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").EditorMode(EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        var id = defaultRTE.getID() + 'html-preview';
        htmlPreview = defaultRTE.element.querySelector('#' + id);
        if (mdsource.classList.contains('e-active')) {
            mdsource.classList.remove('e-active');
            mdsource.parentElement.title = 'Preview';
            textArea.style.display = 'block';
            textArea.style.width = '100%';
            htmlPreview.style.display = 'none';
        } else {
            mdsource.classList.add('e-active');
            if (!htmlPreview) {
                htmlPreview = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.type === 'preview') {
                textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
            } else {
                htmlPreview.classList.remove('e-pre-source');
                textArea.style.width = '50%';
            }
            htmlPreview.style.display = 'block';
            markDownConversion();
            mdsource.parentElement.title = 'Code View';
        }
    }
</script>
<style>
    .e-richtexteditor textarea.e-content {
        float: left;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }

    .e-richtexteditor .e-rte-content .e-content {
        min-height: 150px;
    }

    .e-richtexteditor .e-rte-content {
        overflow: hidden;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .e-rte-content .e-content {
        float: right;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            tooltipText = "Preview",
            template = "<button id='preview-code' class='e-tbar-btn e-control e-btn e-icon-btn'>" +
"<span class='e-btn-icon e-md-preview e-icons'></span></button>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
and phrases should look different from each other.

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We can add our own custom formation syntax for the Markdown formation.

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}

Insert link

To use a link, add the CreateLink item to the toolbar items.

To create a link for a text or an image in the Markdown editor, follow these steps:

Click the Insert icon in the link dialog.
Enter the link and other relevant information.
Click the Insert button to add the link to the editor area.

The link will be added to the editor area.

Please refer to the sample and code snippets below to add the link in the Markdown editor.

CSHTML
Controller.cs
@using Syncfusion.EJ2.RichTextEditor

<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").EditorMode(EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        var id = defaultRTE.getID() + 'html-preview';
        htmlPreview = defaultRTE.element.querySelector('#' + id);
        if (mdsource.classList.contains('e-active')) {
            mdsource.classList.remove('e-active');
            mdsource.parentElement.title = 'Preview';
            textArea.style.display = 'block';
            textArea.style.width = '100%';
            htmlPreview.style.display = 'none';
        } else {
            mdsource.classList.add('e-active');
            if (!htmlPreview) {
                htmlPreview = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.type === 'preview') {
                textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
            } else {
                htmlPreview.classList.remove('e-pre-source');
                textArea.style.width = '50%';
            }
            htmlPreview.style.display = 'block';
            markDownConversion();
            mdsource.parentElement.title = 'Code View';
        }
    }
</script>
<style>
    .e-richtexteditor textarea.e-content {
        float: left;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }

    .e-richtexteditor .e-rte-content .e-content {
        min-height: 150px;
    }

    .e-richtexteditor .e-rte-content {
        overflow: hidden;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .e-rte-content .e-content {
        float: right;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            tooltipText = "Preview",
            template = "<button id='preview-code' class='e-tbar-btn e-control e-btn e-icon-btn'>" +
"<span class='e-btn-icon e-md-preview e-icons'></span></button>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
and phrases should look different from each other.

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We can add our own custom formation syntax for the Markdown formation.

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}

Markdown to HTML

The Rich Text Editor provides an instant preview of Markdown changes. Type or edit the text and apply formatting to view the Markdown preview.

This example demonstrates how to preview Markdown changes in the Rich Text Editor. The third-party library Marked is used to convert Markdown into HTML content.

CSHTML
Controller.cs
@using Syncfusion.EJ2.RichTextEditor

<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").EditorMode(EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        var id = defaultRTE.getID() + 'html-preview';
        htmlPreview = defaultRTE.element.querySelector('#' + id);
        if (mdsource.classList.contains('e-active')) {
            mdsource.classList.remove('e-active');
            mdsource.parentElement.title = 'Preview';
            textArea.style.display = 'block';
            textArea.style.width = '100%';
            htmlPreview.style.display = 'none';
        } else {
            mdsource.classList.add('e-active');
            if (!htmlPreview) {
                htmlPreview = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.type === 'preview') {
                textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
            } else {
                htmlPreview.classList.remove('e-pre-source');
                textArea.style.width = '50%';
            }
            htmlPreview.style.display = 'block';
            markDownConversion();
            mdsource.parentElement.title = 'Code View';
        }
    }
</script>
<style>
    .e-richtexteditor textarea.e-content {
        float: left;
        border-right: 1px solid rgba(0, 0, 0, 0.12);
    }

    .e-richtexteditor .e-rte-content .e-content {
        min-height: 150px;
    }

    .e-richtexteditor .e-rte-content {
        overflow: hidden;
    }

    .e-icon-btn.e-active .e-md-preview::before {
        content: '\e350';
    }

    .e-icon-btn .e-md-preview::before {
        content: '\e345';
    }

    .e-rte-content .e-content {
        float: right;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            tooltipText = "Preview",
            template = "<button id='preview-code' class='e-tbar-btn e-control e-btn e-icon-btn'>" +
"<span class='e-btn-icon e-md-preview e-icons'></span></button>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"In Rich Text Editor , you click the toolbar buttons to format the words and the changes are visible immediately. 
Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words 
and phrases should look different from each other.

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/javascript/demos/#/material/rich-text-editor/markdown-editor-custom-format.html).

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}