angular-markdown-it
v0.6.1
Published
Angular directive for rendering markdown with markdown-it.
Downloads
633
Maintainers
macedigitalReadme
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).
<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']);Usage
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 -->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.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.
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.module('myapp', ['ngSanitize', 'mdMarkdownIt'])
.config(['markdownItConverterProvider', function(markdownItConverter) {
markdownItConverter
.use(plugin1)
.use(plugin2, opts, ...)
.use(plugin3)
;
}])There are many markdown-it plugins available.
License
MIT