angular-marked

AngularJS Markdown using marked.

Please note: neither this directive nor marked (by default) implement sanitization. As always, sanitizing is necessary for user-generated content.

Install

bower install angular-marked

or

npm install angular-marked

or

jspm install angular-marked=npm:angular-marked

Depending on your setup you may need include script tags in your html:

<scriptsrc="bower_components/marked/lib/marked.js"></script><scriptsrc="bower_components/angular-marked/dist/angular-marked.js"></script>

Usage

varapp=angular.module('example-app',['hc.marked']);

Set default options (optional)

app.config(['markedProvider',function(markedProvider){markedProvider.setOptions({gfm: true});}]);

Example using highlight.js Javascript syntax highlighter (must include highlight.js script).

app.config(['markedProvider',function(markedProvider){markedProvider.setOptions({gfm: true,tables: true,highlight: function(code,lang){if(lang){returnhljs.highlight(lang,code,true).value;}else{returnhljs.highlightAuto(code).value;}}});}]);

Override Rendered Markdown Links

Example overriding the way custom markdown links are displayed to open in new windows:

app.config(['markedProvider',function(markedProvider){markedProvider.setRenderer({link: function(href,title,text){return"<a href='"+href+"'"+(title ? " title='"+title+"'" : '')+" target='_blank'>"+text+"</a>";}});}]);

Use as a directive

<marked>
# Markdown directive
*It works!* </marked>

Bind the markdown input to a scope variable:

<divmarked="my_markdown"></div><!-- Uses $scope.my_markdown -->

Include a markdown file:

<divmarkedsrc="'README.md'"></div><!-- Uses markdown content from README.md -->

Or a template (great for md that includes code blocks):

<scripttype="text/ng-template" id="tpl.md">
## Markdown**Codeblocks**Thisis<b>bold</b>**Ampersands**StarTrek&StarWars</script><divmarkedsrc="'tpl.md'"></div><!-- Uses markdown content from tpl.md -->

Use compile attribute to support AngularJS directives inside markdown.

<scripttype="text/ng-template" id="tpl.md">
## Markdown**Thiswillgothrough$compileandwillbeeffective**<buttonng-click="doClick()"></button></script><divng-controller="ClickHandler"><divmarkedsrc="'tpl.md'" compile="true"></div></div>

.controller('ClickHandler',function(){this.doClick=function(){
...
};})

As a service

app.controller('myCtrl',['marked',function(marked){$scope.html=marked('#TEST');}]);

Testing

Install npm and bower dependencies:

npm install
bower install
npm test

Why?

I wanted to use marked instead of showdown as used in angular-markdown-directive as well as expose the option to globally set defaults. Yes, it is probably best to avoid creating a bunch of angular wrapper modules... but I use this enough across multiple projects to make it worth while for me. Use it if you like. Pull requests are welcome.

Acknowledgments

Based on angular-markdown-directive by briantford which, in turn, is based on this excellent tutorial by @johnlinquist.

License

Copyright (c) 2013-2015 Jayson Harshbarger

MIT License