An easy to use markdown directive with static outlining, html escaping/sanitization, resource loading and model binding.

A demonstration can be found here.

• angular.js ~1.2.26
• angular-sanitize ~1.2.26 (optional)
• showdown ~0.3.1

Either copy the contents of the dist folder found on GitHub or install with Bower.

$ bower install angular-markdown-text
$ bower install angular-sanitize

Installation of angular-sanitize is recommended but optional; the module will detect if it's available.

The markdown directive can work with static content, model binding and external resources.

The simplest form is wrapping the markdown directive around your text. The directive will automatically outline the content so that you don't have to worry about spaces or tabs in your html markup.

<markdown>
  # Hello World!
</markdown>

Provide the markdown-model attribute a model expression to convert its value to html.

<textarea ng-model="my.model"></textarea>
<markdown markdown-model="my.model"></markdown>

The directive allows you to load markdown files from a server by specifying a url expression in the markdown-src attribute. Note that, like the ng-include attribute, this is an expression; static values should be surrounded by a single quote (').

<markdown markdown-src="'my/external/resource.md'"></markdown>

These attributes are simply overrides of the configuration. If no value (true/false) is provided the default found in the markdownConfig is used.

markdown-escape-html - escape any html content.

markdown-sanitize - sanitize the html output.

markdown-outline - outline the markup.

Global configuration can be modified by injecting the markdownConfig at the config phase of your module.

angular.module('myApp').config(function(markdownConfig){
  // Disable sanitization.
  markdownConfig.sanitize = false;
});

markdownConfig = {
  // Outline static markup
  outline: true,
  // Escape html
  escapeHtml: false,
  // Sanitize html,
  sanitize: true,
  // Showdown options
  showdown: {
    extensions: []
  }
};