I’ve recently started learning Angular 5. As part of putting together an application as practice, I found myself needing to write a brief help page to describe to users how to use the application and what the various buttons mean. I could’ve done this in pure-HTML but I find Markdown far easier to read and maintain.
Whilst numerous libraries already exist to convert Markdown to HTML, I couldn’t find an Angular directive to provide Markdown to HTML conversion for Angular components. Using the marked, I knocked together a quick Attribute Directive to wrap this together.
The directive is as below - the only dependency is the
marked library which can be installed with:
npm install --save marked
And here is the full source code.
Though we access the content of the tagged element using the
nativeElement, it uses
Renderer2 to write changes
back to the tagged element. Writing to the DOM using an
ElementRef is discouraged and using
Renderer2 is preferred
as described in the angular.io core documentation.
See the below StackBlitz project for an example of its usage.