Convert Markdown To HTML using Markdown Converter

17 Dec 202514 minutes to read

The Markdown Converter is a simple and fast tool that converts Markdown text into clean HTML. This makes it easy to display well-structured content on web pages and applications with consistent formatting.

The conversion is handled by the toHtml method, which takes Markdown as input and returns the corresponding HTML. It supports all common Markdown elements like headings, lists, tables, links, images, and inline styles.

Here is the example code snippet of Markdown Converter:

import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';

const markdownContent = '# Hello World\nThis is **Markdown** text.';
// Convert Markdown to HTML
const htmlOutput = MarkdownConverter.toHtml(markdownContent);
console.log(htmlOutput);

Configurable Options for Markdown Converter

The Markdown Converter provides several options to customize the conversion process. These options are passed as part of the configuration when calling the toHtml method. By using these options, you can control how Markdown is parsed and rendered into HTML.

MarkdownConverter.toHtml(markdownContent: string, options?: MarkdownConverterOptions);

Markdown Converter Options

Option	Description	Type	Default
`async`	Enables or disables asynchronous conversion for large content processing.	`boolean`	`false`
`gfm`	Enables or disables support for GitHub Flavored Markdown (GFM).	`boolean`	`true`
`lineBreak`	Enables or disables conversion of single line breaks into `<br>` elements.	`boolean`	`false`
`silence`	Enables or disables error suppression, skipping invalid Markdown instead of throwing errors.	`boolean`	`false`

The below sample demonstrates how to use the Syncfusion Markdown Editor along with the Markdown Converter to convert Markdown content into HTML with configurable options. This setup allows real-time editing and preview of the converted output.

To make the experience seamless, the Syncfusion Splitter control is used to display the editor and preview side-by-side.

index.js
index.html
ej.base.enableRipple(true);

var textArea;
var srcArea;
var markdownConverter = ej.markdownconverter.MarkdownConverter;
var splitObj = new ej.layouts.Splitter({
  height: '450px',
  resizing: onResizing,
  created: updateOrientation,
  width: '100%',
  paneSettings: [
    {
      resizable: true,
      size: '50%',
      min: '40%',
    },
    { min: '40%' },
  ],
});
splitObj.appendTo('#splitter-rte-markdown-preview');

var markdownRTE = new ej.richtexteditor.RichTextEditor({
  height: '100%',
  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 Syncfusion’s <b>Markdown Converter</b> is used in this sample to convert markdown into HTML content.',
  placeholder: 'Enter your text here...',
  floatingToolbarOffset: 0,
  editorMode: 'Markdown',
  toolbarSettings: {
    type: 'Expand',
    enableFloating: false,
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      '|',
      'Formats',
      'Blockquote',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
  },
  saveInterval: 1,
  actionComplete: updateValue,
  change: onChange,
  showCharCount: true,
  maxLength: 5000,
  created: onCreate,
});
markdownRTE.appendTo('#markdown-editor');

function onChange() {
  updateValue();
}
function onResizing() {
  markdownRTE.refreshUI();
}
function onCreate() {
  loadExternalFile();
  textArea = markdownRTE.contentModule.getEditPanel();
  srcArea = document.querySelector('.source-code');
}
function updateValue() {
  srcArea.innerHTML = markdownConverter.toHtml(defaultRTE.contentModule.getEditPanel().value, {
    async: true,
    gfm: true,
    lineBreak: true,
    silence: true
  });
}
function updateOrientation() {
  if (ej.base.Browser.isDevice) {
    splitObj.orientation = 'Vertical';
    document.body.querySelector('.heading').style.width = 'auto';
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 Markdown Editor with Markdown converter</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Typescript UI Controls">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-richtexteditor/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/material.css" rel="stylesheet" />

  <script src="../index.js"></script>
  <script src="https://cdn.syncfusion.com/ej2/33.1.44/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>

  <div id="container">
    <div class="default-section">
      <div id="splitter-rte-markdown-preview">
        <div class="splitter-default-content pane1">
          <div id="markdown-editor"></div>
        </div>
        <div class="heading right">
          <div>
            <h6 class="title"><b>Markdown Preview</b></h6>
          </div>
          <div class="splitter-default-content source-code pane2" style="padding: 20px"></div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .heading {
      float: left;
      width: 50%;
      position: relative;
      box-sizing: border-box;
      padding: 0px;
      padding-left: 0px;
      padding-right: 0px;
    }

    .title {
      color: #333333;
      letter-spacing: 1px;
      padding-left: 10px;
      text-align: center;
      margin: 15px 0;
    }

    .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;
    }

    .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-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,
    .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,
    .bootstrap5 .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,
    .bootstrap5-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\.3 .e-icon-btn .e-md-preview::before,
    .bootstrap5\.3-dark .e-icon-btn .e-md-preview::before,
    .bootstrap5-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-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;
      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 ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

Convert Markdown To HTML using Markdown Converter

Configurable Options for Markdown Converter

Markdown Converter Options