https://github.com/macedigital/angular-markdown-it

Angular 1.x directive for rendering markdown with markdown-it.
https://github.com/macedigital/angular-markdown-it

Last synced: 2 months ago
JSON representation

Angular 1.x directive for rendering markdown with markdown-it.

• Host: GitHub
• URL: https://github.com/macedigital/angular-markdown-it
• Owner: macedigital
• License: mit
• Created: 2015-09-26T00:41:40.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-02-13T18:13:26.000Z (almost 5 years ago)
• Last Synced: 2024-10-01T05:08:45.181Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 84 KB
• Stars: 5
• Watchers: 1
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Bower version][bower-image]

![NPM version][npm-image]

![Dev Dependencies][david-dev]

![Peer Dependencies][david-peer]

[![Build Status][ci-image]][ci-url]

[![Code Coverage status][codecov-image]][codecov-url]

# angular-markdown-it

[![Greenkeeper badge](https://badges.greenkeeper.io/macedigital/angular-markdown-it.svg)](https://greenkeeper.io/)

> [Angular 1.x](https://angularjs.org) directive for rendering markdown with [markdown-it](https://github.com/markdown-it/markdown-it). This directive is based on @btford's [markdown directive](https://github.com/btford/angular-markdown-directive).

## Getting started

### Quick start

Pick one of these options:

- [Download latest release](https://github.com/macedigital/angular-markdown-it/archive/master.zip)

- Clone the repository `git clone https://github.com/macedigital/angular-markdown-it.git`

- Install with [NPM](https://npmjs.org/) `npm install angular-markdown-it`

- Install with [Bower](http://bower.io/) `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

  

    

    

    

    

    

    

  

  

    

  

````

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.

```js

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:

````html

# Hey there!

*It works!*

````

You can also bind the markdown input to a scope variable:

````html



````

Or, you include a markdown file:

````html



````

## Configuration

By default, nothing has to be configured. All markdown will be rendered similar to [GFM](https://help.github.com/categories/writing-on-github/), 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.

````js

angular.module('myapp', ['ngSanitize', 'mdMarkdownIt'])

  .config(['markdownItConverterProvider', function(markdownItConverter) {

      markdownItConverter.config('commonmark', {

        breaks: true,

        html: true

      });

  }])

````

In above example, we'll use [CommonMark](http://commonmark.org/) mode, render line-breaks as `
` tags, and enable HTML tags in the source.

See [markdown-it presets and options](https://github.com/markdown-it/markdown-it#init-with-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`.  

````js

angular.module('myapp', ['ngSanitize', 'mdMarkdownIt'])

  .config(['markdownItConverterProvider', function(markdownItConverter) {

      markdownItConverter

        .use(plugin1)

        .use(plugin2, opts, ...)

        .use(plugin3)

      ;

  }])

````

There are many [markdown-it plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin) available.

## License

MIT

[npm-image]:https://img.shields.io/npm/v/angular-markdown-it.svg?style=flat

[bower-image]:https://img.shields.io/bower/v/angular-markdown-it.svg?style=flat

[ci-image]: https://travis-ci.org/macedigital/angular-markdown-it.svg?style=flat

[ci-url]: https://travis-ci.org/macedigital/angular-markdown-it

[david-dev]:https://img.shields.io/david/dev/macedigital/angular-markdown-it.svg?style=flat

[david-peer]:https://img.shields.io/david/peer/macedigital/angular-markdown-it.svg?style=flat

[codecov-image]:https://img.shields.io/codecov/c/github/macedigital/angular-markdown-it.svg?style=flat

[codecov-url]:https://codecov.io/github/macedigital/angular-markdown-it