Rendering Markdown In Angular
How to use Angular directives to render markdown documents
There are plenty of third party libraries dealing with markdown documents with marked.js, showdown.js and markdown-it among the most popular, so, we are not here to reinvent the wheel.
However, all of the available libraries generate an HTML output, so, there’s not much you can do with them in Angular rather than passing that output to the innerHTML property of an element within your app with little to no control about the outcome.
How about using standard Angular directives to perform the rendering instead?
Choosing The Library
In order to gain the full control of the rendered output we’ll be needing a library parsing the markdown text in some sort of abstract data format to be fed into our component’s view.
After digging into many of the libraries documentation and source code, I decided to go with remarkjs, part of unifiedjs ecosystem.
As per the project’s main page: “The project parses and compiles Markdown, and let programs process Markdown without ever compiling to HTML”; sounding exactly like what we were searching for.
