JarCastingangular-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:
<script src="bower_components/marked/lib/marked.js"></script>
<script src="bower_components/angular-marked/dist/angular-marked.js"></script>
Usage
var app = 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) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.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:
<div marked="my_markdown">
</div>
<!-- Uses $scope.my_markdown -->
Include a markdown file:
<div marked src="'README.md'">
</div>
<!-- Uses markdown content from README.md -->
Or a template (great for md that includes code blocks):
<script type="text/ng-template" id="tpl.md">
## Markdown
**Code blocks**
This is <b>bold</b>
**Ampersands**
Star Trek & Star Wars
</script>
<div marked src="'tpl.md'"></div>
<!-- Uses markdown content from tpl.md -->
Use compile attribute to support AngularJS directives inside markdown.
<script type="text/ng-template" id="tpl.md">
## Markdown
**This will go through $compile and will be effective**
<button ng-click="doClick()"></button>
</script>
<div ng-controller="ClickHandler">
<div marked src="'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