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: September 19, 2020
Last Edit September 19, 2020
Created April 20, 2020
Views 22
Tags
Markdown
Angular

Join us!

Do you like this website?

Bookmark it and come back here to write a post yourself when you run into something shareable.

Early collaborators will get to own a part of the project (5 to 20%)... >> read more

Your Comment

Feel free to post additional info or improvement suggestions.
preview
Optional, never shown, displays gravatar.

Formatting Tips

This editor uses Markdown to easily add code in your posts.

Triple backticks for full line(s) of code (or indent 4 spaces)

```
let foo = 'bar';
```

[link text](http://a.com)

*italic* **bold**

More Tips