Bower version NPM version Dev Dependencies Peer Dependencies Build Status Code Coverage status
Angular 1.x directive for rendering markdown with markdown-it. This directive is based on @btford's markdown directive.
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
You'll need to load angular, angular-sanitize, and markdown-it in your markup like in the example below (assuming you installed via npm).
<html ng-app="myapp"> <head> <!-- ... --> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script> <script src="node_modules/markdown-it/dist/markdown-it.min.js"></script> <script src="node_modules/angular-markdown-it/dist/ng-markdownit.min.js"></script> <!-- ... --> </head> <body> <!-- ... --> </body> </html>
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.
require('angular'); require('angular-sanitize'); global.markdownit = require('markdown-it'); require('angular-markdown-it'); angular.module('myapp', ['mdMarkdownIt']);
Include the markdown-it directive in your templates:
<markdown-it> # Hey there! *It works!* </markdown-it>
You can also bind the markdown input to a scope variable:
<div markdown-it="markdown"></div> <!-- Uses $scope.markdown -->
Or, you include a markdown file:
<div markdown-it ng-include="'README.md'"></div> <!-- Uses content from README.md -->
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:
You can pass in custom options to the markdownItConverterProvider by choosing a preset, and/or custom settings calling the config() method.
angular.module('myapp', ['ngSanitize', 'mdMarkdownIt']) .config(['markdownItConverterProvider', function(markdownItConverter) { markdownItConverter.config('commonmark', { breaks: true, html: true }); }])
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.
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.module('myapp', ['ngSanitize', 'mdMarkdownIt']) .config(['markdownItConverterProvider', function(markdownItConverter) { markdownItConverter .use(plugin1) .use(plugin2, opts, ...) .use(plugin3) ; }])
There are many markdown-it plugins available.
MIT