Overview

Angular Markdown directive

This is a pretty simple project whose goal is simply to maintain (and improve slightly) a rather useful bit of code that was orinigally written as an introduction to markdown directives. Personally, I've found the ability to use a markdown directive very useful, so I copied the code, and have put it in source control. My intention is to continue to maintain this, so it should stay up to date with the future versions of angular.

Changes

02/18/13: - Added support for strip="true", which strips all whitespace from the begining of each line.

02/12/13:

  • Added support for Showdown extensions
  • Updated example document
  • Made use of ngModel optional
  • Added automatic support for refreshing prettify calls when using a model

Usage

Using it is pretty simple. Just include angular.markdown.js after angular. (You will also need to include Showdown.) Then you will need to make sure you require angular-markdown in your app module. That's it!

Markdown Directive

Using the markdown directive is pretty simple:

<html>
    <head>...</head>
    <body>
        <markdown>
# Example

This is an **example**. Markdown goes `here`.
        </markdown>
    </body>
</html>

Notice how the content of the directive isn't indented? That's because the content is taken directly and translated to markdown. Indenting would make it appear as a code block. (Note: if you would like to avoid this, then checkout the strip="true" option.)

Extensions

In order to use extensions, you must include the appropriate javascript in your html page. Once that's been included, using extentions with the markdown directive is easy:

<html>
    <head>...</head>
    <body>
        <markdown extensions="github, table">
# Example

This is an **example**. Markdown goes `here`.

## Table

| Col 1   | Col 2                                              |
|======== |====================================================|
|**bold** | ![Valid XHTML] (http://w3.org/Icons/valid-xhtml10) |
| Plain   | Value
        </markdown>
    </body>
</html>

As you can see, the extensions attribute takes a comma seperated list of the extensions to load, by name.

Stripping Leading Whitespace

In most cases, there's no reason not to strip the leading whitespace off of a tag, keeping the code much cleaner. That, however, is not the default, because it will break some standard markdown syntax. Still, it's easy enough to enable:

<html>
    <head>...</head>
    <body>
        <markdown strip="true">
            # Example

            This is an **example**. Markdown goes `here`.
        </markdown>
    </body>
</html>

The way this works is simple. When strip="true" is put on the directive, any space or tab character at the begining of a line (or \n) is stripped before being parsed. If you would like to still use code, I'd recomend using github codeblocks:

<html>
    <head>...</head>
    <body>
        <markdown extensions="github" strip="true">
            # Example

            This is an **example**. Markdown goes `here`.
            ```
            # Code goes here!
            ```
        </markdown>
    </body>
</html>

Keep in mind, this could cause other problems, so you may wish to try disabling this if anything unexpected happens.

Allowing HTML tags in markdown

Markdown is supposed to allow HTML tags in its syntax. For obvious security reasons, those are not accepted by default in the directive. You can allow them back by setting the allow-html attribute:

<html>
    <head>...</head>
    <body>
        <markdown allow-html="true">
# Example

This is a single paragraph<br>
with a beautiful line break.
        </markdown>
    </body>
</html>

Examples

For a more complete set of examples, check out example\index.html.

License.

This code is licensed under the MIT license.

Credit

Original Authors: John Lindquist, Jonathan Rowny

Maintained by: Christopher S. Case