Having trouble getting help?
Contact Support
Contact Support
Markdown to HTML preview in ASP.NET CORE Markdown Editor Control
17 Mar 202510 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 CORE 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">
<ejs-splitter id="splitter-rte-markdown-preview" height="450px" width="100%" resizing="resizing" created="onCreateSplitter">
<e-splitter-panes>
<e-splitter-pane size="50%" resizable="true" cssClass="pane1" min="40%">
<e-content-template>
<div class="content">
<ejs-richtexteditor id="markdown-editor" height="448px" value="@ViewBag.value" editorMode="Markdown" saveInterval=1 maxLength=5000 showCharCount="true" change="onChange" actionComplete="updateValue" created="onCreate" placeholder="Enter your text here...">
<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
</div>
</e-content-template>
</e-splitter-pane>
<e-splitter-pane cssClass="pane2" min="40%">
<e-content-template>
<div class="heading right">
<h6 class="title"><b>Markdown Preview</b></h6>
<div class="content">
<div class="splitter-default-content source-code pane2" style="padding:20px"></div>
</div>
</div>
</e-content-template>
</e-splitter-pane>
</e-splitter-panes>
</ejs-splitter>
</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';
}
.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 {
content: '\e7d0';
}
.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 type="text/javascript">
var rteObj, textArea, srcArea, splitObj;
function onCreate() {
rteObj = this;
loadExternalFile();
textArea = rteObj.contentModule.getEditPanel() ;
srcArea = document.querySelector('.source-code');
}
function onChange() {
updateValue();
}
function resizing() {
rteObj.refreshUI();
}
function updateValue() {
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();
}
}