Use CommonMark Markdown in Angular 2+

problem

CommonMark is a strongly defined variant of Markdown, highly compatible, aimed at resolving rendering ambiguities. It has a reference JavaScript implementation at https://github.com/commonmark/commonmark.js

How exactly can the JavaScript library be used in Angular?

solution

As the docs say, first install it with npm:

npm install commonmark

In the TypeScript file, import what classes you need from the library, for example:

import { HtmlRenderer, Parser } from 'commonmark';

Then to use it:

const reader = new Parser();
const writer = new HtmlRenderer();
const parsed = reader.parse('Hello *world*');
const result = writer.render(parsed);

The key is here to use Parser instead of the commonmark.Parser found in the docs.

Gravatar
Author
Dan Dumitru
Last Edit
Sep 19, 2020 17:34