Ng-Showdown directive

This directive allows you to render markdown.

Usage

You can convert markdown to html within your controller.

plugin.controller('MyController', function($scope, $filter) {

		$scope.markdownSource = "### H3\nThis is **important**!";

		$scope.renderedHTML = $showdown.makeHtml($showdown.stripHtml($scope.markdownSource));

});

Apply the directive to your templates:

<div markdown-to-html="markdownSource | stripHtml"></div>

znMarkdown filter

For compatibility, most plugins should take advantage of the znMarkdown filter. It strips input HTML tags, sanitizes unsafe links and images, and then renders markdown.

You can use it within your controller.

plugin.controller('MyController', function($scope, $filter) {

		var $znMarkdown = $filter('znMarkdown');

		$scope.markdownSource = "### H3\nThis is **important**!";

		$scope.renderedHTML = $znMarkdown($scope.markdownSource);

});

Apply the directive to your templates:

<div ng-bind-html="markdownSource | znMarkdown"></div>

znPresentationalText filter

There is an additional convenience filter for presentation text fields: znPresentationalText_ filter. It will conditionally process markdown for field or yield it’s plain text label.

You can use it within your controller.

plugin.controller('MyController', function($scope, $filter) {

		var $znPresentationalText = $filter('znPresentationalText');

		$scope.field = { ... };

		$scope.renderedHTML = $znPresentationalText($scope.field);

});

Markdown

Supported Features

Headers

Emphasis

Lists

Links

Code Blocks

Blockquotes

Horizontal Rules

Line Breaks

Unsupported Features

Images

Tables

Inline HTML

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis (bold,italic,strikethrough)

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Lists

1. First ordered list item
2. Another item
  * Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.

   Some text that should be aligned with the above item.

* Unordered list can use asterisks
- Or minuses
+ Or pluses

1. First ordered list item
2. Another item
   • Unordered sub-list.
3. Actual numbers don’t matter, just that it’s a number
4. Ordered sub-list

5. And another item.

   Some text that should be aligned with the above item.

• Unordered list can use asterisks
• Or minuses
• Or pluses

Links

Note: only secure “https://” links are allowed. Non-secure links will be ignored.

You can define a link including link text as:

[Click here to Search](https://www.google.com)

Click here to Search

You can also simply use the link directly as:

https://www.example.com

https://www.example.com

Code Blocks

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Or fenced:

` ` `
code
` ` `

code

Blockquote

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal Rules

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more…

Hyphens

Asterisks

Underscores

Line Breaks

Here is a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it is a separate line in the *same paragraph*.

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph.

Images

Note: Image links are not secure and will be ignored.

![alt text](http://www.example.com/logo.png "Logo Title Text 1")

Tables

Note: Tables are not supported and will be ignored.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Inline HTML

Note: Inline HTML is not supported and will be ignored.

<div style="color: red;">Just the text left.</div>