How can I help you?
Getting started in EJ2 JavaScript Markdown Converter
17 Dec 202518 minutes to read
This section explains how to create and configure a simple Markdown Converter.
Dependencies
The following dependency is required to use the Markdown Converter in the application.
@syncfusion/ej2-markdown-converterSetup for local development
Refer to the following steps to set up your local environment.
Step 1: Create an app folder my-app for your project.
Step 2: Create a my-app/resources folder to store local scripts and styles files.
Step 3: Open Visual Studio Code and create my-app/index.js and my-app/index.html files for using the Essential JS 2 Markdown Converter.
Adding Syncfusion resources
The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.
- Using local script
- Using CDN link for script
Using local script
1. Download Essential Studio JavaScript (Essential JS 2): Obtain the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
2. Locate Script File: After installing the Essential JS 2 product build, identify the location of the Markdown Converter’s script file. The syntax for the file paths is as follows:
Syntax:
Script:
**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Example:
3. Copy Files to Resources Folder: Copy/paste the global scripts from the above installed location to my-app/resources location.
4. Referencing in HTML File Reference the Markdown Converter’s scripts into the index.html file.
Here’s an example of referencing the Markdown Converter’s script in an HTML file:
a.Essential Dependency
This setup includes the scrip that required to include the Syncfusion Markdown Converter. Use this setup for a application that requires a lightweight Markdown Converter functionality
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Markdown Converter</title>
<!-- Essential JS 2 Markdown Converter's global script -->
<script src="resources/ej2-markdown-converter.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Using CDN link for script
Using CDN link, you can directly refer the Markdown Converter’s script into the index.html.
Refer the Markdown Converter’s CDN link as below.
Syntax:
Script:
http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Example:
Script: http://cdn.syncfusion.com/ej2/ej2-markdown-converter/dist/global/ej2-markdown-converter.min.js
a.Essential Dependency
This setup includes the scrip that required to include the Syncfusion Markdown Converter. Use this setup for a application that requires a lightweight Markdown Converter functionality
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Markdown Converter</title>
<!-- Essential JS 2 Markdown Converter's global script -->
<script src="http://cdn.syncfusion.com/ej2/ej2-markdown-converter/dist/global/ej2-markdown-converter.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Overview 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.
ej.base.enableRipple(true);
var textArea;
var srcArea;
var markdownConverter = ej.markdownconverter.MarkdownConverter;
var markdownRTE = new ej.richtexteditor.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 ej.richtexteditor.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: function () {
textArea = defaultRTE.contentModule.getEditPanel();
textArea.addEventListener('keyup', function (e) {
markdownConversion();
});
mdsource = document.getElementById('preview-code');
mdsource.addEventListener('click', function (e) {
fullPreview();
if (e.currentTarget.classList.contains('e-active')) {
defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo'
]);
} else {
defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', 'OrderedList',
'UnorderedList', 'SuperScript', 'SubScript', 'CreateLink', 'Image', 'CreateTable', 'Formats', 'Blockquote', 'Undo', 'Redo'
]);
}
});
}
});
markdownRTE.appendTo('#markdown-editor');
function markdownConversion() {
if (mdsource.classList.contains('e-active')) {
var id = defaultRTE.getID() + 'html-view';
var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');
htmlPreview.innerHTML = markdownConverter.toHtml(defaultRTE.contentModule.getEditPanel().value);
}
}
function fullPreview() {
var id = defaultRTE.getID() + 'html-preview';
var htmlPreview = defaultRTE.element.querySelector('#' + id);
var previewTextArea = defaultRTE.element.querySelector('.e-rte-content');
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 = ej.base.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(defaultRTE.contentModule.getEditPanel().value);
mdsource.parentElement.title = 'Code View';
}
}<!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>
</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>