How can I help you?
Getting started in EJ2 TypeScript Markdown Converter
17 Dec 202518 minutes to read
This section explains how to create and configure a simple Markdown Converter and demonstrates its basic usage in a application.
Dependencies
The following dependency is required to use the Markdown Converter.
@syncfusion/ej2-markdown-converterAdd Syncfusion JavaScript Markdown Converter package
Syncfusion JavaScript (Essential JS 2) Markdown Converter package is available as a standalone package on the npmjs.com public registry. You can install it using the following command:
npm install @syncfusion/ej2-markdown-converterOverview of Markdown Converter
The Markdown Converter is a lightweight and efficient utility designed to transform Markdown formatted text into clean, semantic HTML. This conversion enables users to render structured content seamlessly across web pages and applications, ensuring better readability and consistent formatting
The core functionality of the Markdown Converter is powered by the toHtml method. This method accepts Markdown content as input and returns the corresponding HTML string.
To demonstrate the functionality of a Markdown Converter, we have provided a sample implementation using Syncfusion Markdown Editor. This example showcases how you can seamlessly edit Markdown content and preview the converted HTML output.
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import {
RichTextEditor,
Link,
Image,
MarkdownEditor,
Toolbar,
Table,
} from '@syncfusion/ej2-richtexteditor';
import { MarkdownFormatter } from '@syncfusion/ej2-richtexteditor';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { MarkdownConverter } from '@syncfusion/ej2-markdown-converter';
RichTextEditor.Inject(Link, Image, MarkdownEditor, Toolbar, Table);
let textArea: HTMLTextAreaElement;
let mdsource: HTMLElement;
let markdownRTE: RichTextEditor = new RichTextEditor({
height: '520px',
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...',
formatter: new MarkdownFormatter({ listTags: { 'OL': '1., 2., 3.' } }),
editorMode: 'Markdown',
toolbarSettings: {
items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'Blockquote', 'OrderedList',
'UnorderedList', 'SuperScript', 'SubScript', '|', 'CreateLink', 'Image', 'CreateTable', '|',
{
tooltipText: 'Preview', template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn" aria-label="Preview Code">' +
'<span class="e-btn-icon e-md-preview e-icons"></span></button>'
}, '|', 'Undo', 'Redo']
},
created: () => {
textArea = markdownRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
markDownConversion();
});
mdsource = document.getElementById('preview-code');
mdsource.addEventListener('click', (e: MouseEvent) => {
fullPreview();
if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
markdownRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo']);
} else {
markdownRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo']);
}
});
}
});
markdownRTE.appendTo('#markdown-editor');
function markDownConversion(): void {
if (mdsource.classList.contains('e-active')) {
let id: string = markdownRTE.getID() + 'html-view';
let htmlPreview: HTMLElement = markdownRTE.element.querySelector('#' + id);
htmlPreview.innerHTML = MarkdownConverter.toHtml((markdownRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value) as string;
}
}
function fullPreview(): void {
let id: string = markdownRTE.getID() + 'html-preview';
let htmlPreview: HTMLElement = markdownRTE.element.querySelector('#' + id);
let previewTextArea: HTMLElement = markdownRTE.element.querySelector('.e-rte-content') as HTMLElement;
if (mdsource.classList.contains('e-active')) {
mdsource.classList.remove('e-active');
mdsource.parentElement.title = 'Preview';
textArea.style.display = 'block';
htmlPreview.style.display = 'none';
previewTextArea.style.overflow = 'hidden';
} else {
mdsource.classList.add('e-active');
if (!htmlPreview) {
htmlPreview = createElement('div', { className: 'e-content e-pre-source' });
htmlPreview.id = id;
textArea.parentNode.appendChild(htmlPreview);
previewTextArea.style.overflow = 'auto';
}
if (previewTextArea.style.overflow === 'hidden') {
previewTextArea.style.overflow = 'auto';
}
textArea.style.display = 'none';
htmlPreview.style.display = 'block';
htmlPreview.innerHTML = MarkdownConverter.toHtml((markdownRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value) as string;
mdsource.parentElement.title = 'Code View';
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Markdown Editor with Markdown Converter Integration</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.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<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>
</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>
</body>
</html>