syncfusion-aspnetcore-markdown-converter

Syncfusion ASP.NET Core Markdown Converter

The Syncfusion ASP.NET Core Markdown Converter is a lightweight client-side utility (loaded via CDN or npm) that transforms Markdown text into clean, semantic HTML. It supports all common Markdown elements — headings, lists, tables, links, images, and inline styles — and integrates seamlessly with the Syncfusion Rich Text Editor tag helper (<ejs-richtexteditor>) for live editing and preview workflows in ASP.NET Core MVC or Razor Pages applications.

---

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet installation and tag helper registration
• CDN stylesheet and script references
• Running a basic Markdown-to-HTML conversion in a Razor view
• Required CSS and theme setup

toHtml API

📄 Read: references/tohtml-api.md

• toHtml method signature and parameters (JavaScript usage from Razor views)
• Supported Markdown elements (headings, lists, tables, links, images, inline styles)
• Return value and usage patterns
• Simple conversion code examples

Configurable Options

📄 Read: references/configurable-options.md

• MarkdownConverterOptions object
• async — asynchronous conversion for large content
• gfm — GitHub Flavored Markdown support
• lineBreak — single line breaks as <br> elements
• silence — suppress errors on invalid Markdown
• When and why to use each option

Rich Text Editor Integration

📄 Read: references/richtexteditor-integration.md

• Combining <ejs-richtexteditor> (editorMode="Markdown") with MarkdownConverter
• Live preview on keyup using toHtml
• Full preview toggle pattern
• Side-by-side Splitter layout
• Toolbar configuration for Markdown mode

---

Quick Start

Register the tag helper and add CDN references, then run a minimal conversion:

{{! _ViewImports.cshtml }}
@addTagHelper *, Syncfusion.EJ2

{{! _Layout.cshtml <head> }}
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>

{{! _Layout.cshtml before </body> }}
<ejs-scripts></ejs-scripts>

// Inline script in Razor view or a linked .js file
var markdownContent = '# Hello World\nThis is **Markdown** text.';
var htmlOutput = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent);
console.log(htmlOutput);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

---

Common Patterns

Convert with all options enabled

var html = ej.markdownconverter.MarkdownConverter.toHtml(markdownContent, {
  async: true,      // Non-blocking for large content
  gfm: true,        // GitHub Flavored Markdown
  lineBreak: true,  // Treat single newlines as <br>
  silence: true     // Suppress parse errors
});

Live preview on user input

document.getElementById('textarea').addEventListener('keyup', function () {
  document.getElementById('preview').innerHTML =
    ej.markdownconverter.MarkdownConverter.toHtml(this.value);
});

Integrate with Syncfusion RTE tag helper in Markdown mode

<ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
    <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>

// HomeController.cs
public ActionResult Index()
{
    ViewBag.value = "# Hello\nType **Markdown** here.";
    ViewBag.tools = new[] {
        "Bold", "Italic", "StrikeThrough", "|",
        "Formats", "Blockquote", "OrderedList", "UnorderedList", "|",
        "CreateLink", "Image", "CreateTable", "|", "Undo", "Redo"
    };
    return View();
}

---

Key Props

Option	Type	Default	Purpose
async	boolean	false	Async conversion for large payloads
gfm	boolean	true	GitHub Flavored Markdown support
lineBreak	boolean	false	Single newlines → <br>
silence	boolean	false	Skip invalid Markdown instead of throwing

---

Common Use Cases

• Static content rendering — Convert user-authored Markdown from a textarea or controller action into HTML for display in a Razor view
• Live editor preview — Pair with the Syncfusion RTE tag helper in Markdown mode for real-time HTML preview
• Side-by-side editing — Use the Syncfusion Splitter tag helper to show editor and rendered HTML simultaneously
• CMS / documentation tools — Process Markdown stored in a database or files before rendering inside a Razor partial view