angular-markdown-it
Angular 1.x directive for rendering markdown with markdown-it. This directive is based on @btford's markdown directive.
Getting started
Quick start
Pick one of these options:
- Download latest release
- Clone the repository
git clone https://github.com/macedigital/angular-markdown-it.git
- Install with NPM
npm install angular-markdown-it
- Install with Bower
bower install angular-markdown-it
Installation
You'll need to load angular
, angular-sanitize
, and markdown-it
in your markup like in the example below (assuming you installed via npm
).
<!-- ... --> <!-- ... --> <!-- ... -->
Since release 0.5 it is possible to lazy-load the markdown-it
dependency. Just make sure it is available before a markdown-it directive is first called.
If you like browserify, you could include this snippet into your entry.js
file instead.
;;globalmarkdownit = ;; angular;
Usage
Include the markdown-it
directive in your templates:
# Hey there!*It works!*
You can also bind the markdown input to a scope variable:
<!-- Uses $scope.markdown -->
Or, you include a markdown file:
<!-- Uses content from README.md -->
Configuration
By default, nothing has to be configured. All markdown will be rendered similar to GFM, but without HTML, typographer & autolinker features.
Nonetheless, there are two methods for changing behavior, which can be combined:
Changing options
You can pass in custom options to the markdownItConverterProvider
by choosing a preset, and/or custom settings calling the config()
method.
angular
In above example, we'll use CommonMark mode, render line-breaks as <br>
tags, and enable HTML tags in the source.
See markdown-it presets and options for all possible variations.
Using plugins
Adding plugins is supported by calling the use()
method.
Each plugin must be added individually, but you can use method-chaining to simplify the process. The signature of use()
mimicks the way how you would add plugins to vanilla markdown-it
.
angular
There are many markdown-it plugins available.
License
MIT