syncfusion-angular-markdown-converter

Original：🇺🇸 English

Translated

Implement the Syncfusion Angular Markdown Converter to convert Markdown text into clean HTML. Use this when converting Markdown to HTML in Angular, integrating a live Markdown preview, configuring GFM or line break options, or working with MarkdownConverter.toHtml() and MarkdownConverterOptions. This skill covers the @syncfusion/ej2-markdown-converter package and Markdown Editor integration with side-by-side HTML preview.

5installs

Sourcesyncfusion/angular-ui-components-skills

Added on2026-05-08

NPX Install

npx skill4agent add syncfusion/angular-ui-components-skills syncfusion-angular-markdown-converter

SKILL.md Content

View Translation Comparison →

Implementing Syncfusion Angular Markdown Converter

The Syncfusion Angular Markdown Converter is a lightweight utility that transforms Markdown-formatted text into clean, semantic HTML. It is typically used alongside the Syncfusion Rich Text Editor (in Markdown mode) to provide a live preview of rendered content.

When to Use This Skill

Convert Markdown text to HTML in an Angular application
Display a live preview of Markdown content as the user types
Configure conversion behavior (GFM support, line breaks, async mode, error suppression)
Build a side-by-side Markdown editor and HTML preview layout
Integrate
```
MarkdownConverter.toHtml()
```
with the Syncfusion Rich Text Editor

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Angular CLI setup and project creation

Installing

@syncfusion/ej2-markdown-converter

and

@syncfusion/ej2-angular-richtexteditor

CSS imports for the material3 theme
Required module injection (MarkdownEditor, Image, Link, Toolbar, Table)
Running the application

Convert Markdown to HTML — toHtml API

📄 Read: references/tohtml-api.md

```
MarkdownConverter.toHtml()
```
method signature
Basic usage example (standalone, no editor required)
Supported Markdown elements (headings, lists, tables, links, images, inline styles)
Using the return value in Angular templates

Configurable Options

📄 Read: references/configurable-options.md

```
MarkdownConverterOptions
```
interface
```
async
```
— asynchronous conversion for large content
```
gfm
```
— GitHub Flavored Markdown support (default: true)
```
lineBreak
```
— convert single line breaks to
```
<br>
```
(default: false)
```
silence
```
— suppress errors on invalid Markdown (default: false)
Full example passing options to
```
toHtml()
```

Rich Text Editor Integration

📄 Read: references/richtexteditor-integration.md

Splitter-based side-by-side editor and preview layout
Configuring
```
ejs-richtexteditor
```
in Markdown
```
editorMode
```
Real-time preview using
```
onChange
```
and
```
updateValue()
```
Toolbar configuration for Markdown editing
```
MarkdownFormatter
```
for custom Markdown syntax
Custom preview toggle button (fullPreview pattern)
Mobile/device orientation handling with
```
Browser.isDevice
```

Quick Start

Install packages and wire up the converter in three steps:

1. Install packages:

bash

npm install @syncfusion/ej2-markdown-converter
npm install @syncfusion/ej2-angular-richtexteditor

2. Import CSS in
src/styles.css
:

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material3.css';

3. Convert Markdown to HTML:

typescript

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

const markdown = '# Hello World\nThis is **Markdown** text.';
const html = MarkdownConverter.toHtml(markdown);
console.log(html);
// Output: <h1>Hello World</h1><p>This is <strong>Markdown</strong> text.</p>

Common Patterns

Pattern 1: Standalone Conversion (No Editor)

When you only need to convert a Markdown string to HTML without an editor UI:

typescript

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

const html = MarkdownConverter.toHtml(markdownString);
document.getElementById('preview')!.innerHTML = html as string;

Pattern 2: Live Preview on Keyup

Convert on every keystroke inside a Rich Text Editor textarea:

typescript

public markDownConversion(): void {
  const textarea = this.editorObj.contentModule.getEditPanel() as HTMLTextAreaElement;
  const previewEl = document.getElementById('html-view') as HTMLElement;
  previewEl.innerHTML = MarkdownConverter.toHtml(textarea.value) as string;
}

Pattern 3: Conversion with Options

Disable GFM and enable line-break conversion:

typescript

const html = MarkdownConverter.toHtml(markdownString, {
  gfm: false,
  lineBreak: true
});

Pattern 4: Side-by-Side Preview with Splitter

For a full editor + preview experience, use the Syncfusion Splitter component alongside the Rich Text Editor in Markdown mode. The preview pane is updated via

updateValue()

on every change event. 📄 Read: references/richtexteditor-integration.md for the full implementation.

Key Props / API

API	Type	Default	Purpose
`MarkdownConverter.toHtml(content, options?)`	static method	—	Converts Markdown string to HTML
`options.async`	boolean	`false`	Async conversion for large content
`options.gfm`	boolean	`true`	GitHub Flavored Markdown support
`options.lineBreak`	boolean	`false`	Single line breaks → `<br>`
`options.silence`	boolean	`false`	Suppress errors on invalid Markdown

syncfusion-angular-markdown-converter

NPX Install

Tags

SKILL.md Content

Implementing Syncfusion Angular Markdown Converter

When to Use This Skill

Documentation and Navigation Guide

Getting Started

Convert Markdown to HTML — toHtml API

Configurable Options

Rich Text Editor Integration

Quick Start

Common Patterns

Pattern 1: Standalone Conversion (No Editor)

Pattern 2: Live Preview on Keyup

Pattern 3: Conversion with Options

Pattern 4: Side-by-Side Preview with Splitter

Key Props / API