Custom Markdown Syntax in Angular Markdown Editor Component

18 Nov 20183 minutes to read

The Angular Markdown Editor allows customization of default Markdown syntax to match preferred formatting styles. You can override the default syntax using the formatter property, enabling a customized Markdown experience.

Customizing markdown syntax

You can define custom symbols for different Markdown formatting options:

  • Use + for unordered lists instead of -.
  • Use __text__ for bold text instead of **text**.
  • Use _text_ for italic text instead of *text*.

The following example customizes Markdown tags:

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, MarkdownFormatter, MarkdownEditorService , HtmlEditorService, ImageService, LinkService, TableService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='markdown-editor' [formatter]='formatter' [editorMode]='mode' [toolbarSettings]='tools' [value]="value"></ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService, MarkdownEditorService, ImageService, LinkService, TableService]
})

export class AppComponent {
    public mode: string = 'Markdown';
    public value: string =
      '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 third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.';
  
    public formatter: MarkdownFormatter = new MarkdownFormatter({
      listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
      formatTags: { 'Blockquote': '> ' },
      selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
    });

    public tools: ToolbarSettingsModel = {
      items: [
        'Bold',
        'Italic',
        'StrikeThrough',
        'InlineCode',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        'Blockquote',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        'Undo',
        'Redo',
      ],
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));