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.
- Added support for
strip="true", which strips all whitespace from the begining of each line.
- Added support for Showdown extensions
- Updated example document
- Made use of
- Added automatic support for refreshing prettify calls when using a model
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 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
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
<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
<html> <head>...</head> <body> <markdown allow-html="true"> # Example This is a single paragraph<br> with a beautiful line break. </markdown> </body> </html>
For a more complete set of examples, check out
This code is licensed under the MIT license.
Original Authors: John Lindquist, Jonathan Rowny
Maintained by: Christopher S. Case