Markdown to HTML preview in ASP.NET MVC Markdown Editor Control
17 Mar 20257 minutes to read
The Markdown Editor provides an instant preview of Markdown changes, allowing users to see the formatted output while typing or editing text. This enhances the editing experience by enabling real-time visualization of Markdown formatting.
Enable Markdown Preview in ASP.NET MVC Markdown Editor
To enable the Markdown preview feature, integrate the third-party Marked library, which converts Markdown content into HTML format. The following example demonstrates how to enable Markdown to HTML preview in the Markdown Editor.
<div class="col-lg-12 col-sm-12 col-md-12">
@Html.EJS().Splitter("splitter-rte-markdown-preview").Height("450px").Width("100%").Created("onCreateSplitter").Resizing("OnResizing").PaneSettings(paneItem =>
{
paneItem.Size("50%").Resizable(true).CssClass("pane1").Min("40%").ContentTemplate(@<div>
@Html.EJS().RichTextEditor("markdown-editor").Height("448px").Placeholder("Enter your text here...").SaveInterval(1).MaxLength(5000).ShowCharCount(true).EditorMode(Syncfusion.EJ2.RichTextEditor.EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Created("onCreate").Change("onChange").ActionComplete("updateValue").Render()</div>).Add();
paneItem.Size("50%").Min("40%").CssClass("pane2").ContentTemplate(@<div class="heading right"><h6 class="title"><b>Markdown Preview</b></h6><div class="splitter-default-content source-code pane2"></div></div>).Add();
}).Render()
</div>
<style>
.heading {
float: left;
width: 50%;
border: 1px solid #e8e8e8;
border-bottom: none;
position: relative;
box-sizing: border-box;
padding: 5px;
border-left: none;
border-top: none;
}
.title {
color: #333333;
letter-spacing: 1px;
padding-left: 10px;
text-align: center;
}
.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';
}
.bootstrap4 .e-icon-btn.e-active .e-md-preview::before {
content: '\e790';
}
.bootstrap4 .e-icon-btn .e-md-preview::before {
content: '\e787';
}
.fluent .e-icon-btn.e-active .e-md-preview::before,
.fluent-dark .e-icon-btn.e-active .e-md-preview::before,
.fluent2 .e-icon-btn.e-active .e-md-preview::before,
.fluent2-dark .e-icon-btn.e-active .e-md-preview::before,
.tailwind .e-icon-btn.e-active .e-md-preview::before,
.tailwind-dark .e-icon-btn.e-active .e-md-preview::before,
.tailwind3 .e-icon-btn.e-active .e-md-preview::before,
.tailwind3-dark .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5 .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5-dark .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5\.3 .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5\.3-dark .e-icon-btn.e-active .e-md-preview::before,
.material3 .e-icon-btn.e-active .e-md-preview::before,
.material3-dark .e-icon-btn.e-active .e-md-preview::before {
content: '\e80e';
}
.tailwind .e-icon-btn .e-md-preview::before,
.tailwind-dark .e-icon-btn .e-md-preview::before,
.tailwind3 .e-icon-btn .e-md-preview::before,
.tailwind3-dark .e-icon-btn .e-md-preview::before,
.bootstrap5 .e-icon-btn .e-md-preview::before,
.bootstrap5-dark .e-icon-btn .e-md-preview::before,
.bootstrap5\.3 .e-icon-btn .e-md-preview::before,
.bootstrap5\.3-dark .e-icon-btn .e-md-preview::before,
.fluent .e-icon-btn .e-md-preview::before,
.fluent-dark .e-icon-btn .e-md-preview::before,
.fluent2 .e-icon-btn .e-md-preview::before,
.fluent2-dark .e-icon-btn .e-md-preview::before,
.material3 .e-icon-btn .e-md-preview::before,
.material3-dark .e-icon-btn .e-md-preview::before {
content: '\e7de';
}
.e-rte-content .e-content {
float: right;
width: 50%;
overflow: auto;
height: inherit;
padding: 8px;
height: 100%;
}
.e-rte-content .e-content.e-pre-source {
width: 100%;
}
.highcontrast .e-richtexteditor textarea.e-content {
border-right: 1px solid #fff;
}
</style>
<script>
var rteObj, textArea, srcArea, splitObj;
function onCreate() {
rteObj = this;
loadExternalFile();
textArea = rteObj.contentModule.getEditPanel();
srcArea = document.querySelector('.source-code');
setTimeout(() => { rteObj.refreshUI(); },10)
}
function onChange() {
updateValue();
}
function OnResizing() {
rteObj.refreshUI();
}
function updateValue(e) {
srcArea.innerHTML = marked(rteObj.contentModule.getEditPanel().value);
}
function onCreateSplitter() {
splitObj = this;
rteObj.refreshUI();
if (ej.base.Browser.isDevice) {
splitObj.orientation = 'Vertical';
document.body.querySelector('.heading').style.width = 'auto';
}
}
function loadExternalFile() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';
script.onload = function () {
updateValue();
};
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.items = new[]
{
"Bold", "Italic", "StrikeThrough", "|", "SuperScript",
"SubScript", "Formats", "OrderedList", "UnorderedList" , "|", "CreateLink", "Image", "CreateTable", "|",
"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. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
return View();
}
}