AngularJS markdown-it directive

Angular 1.x directive for rendering markdown formatted text with markdown-it. Comes with extensive configuration options and supports markdown-it plugins.

Bower version NPM version

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