AngularJS Markdown using marked.

Downloads in past


1.2.26 years ago7 years agoMinified + gzip package size for angular-marked in KB


!NPM versionnpm-badgenpm !Downloadsdownload-badgenpm !Downloadsbower-badge !Build Statustravis-imagetravis-url !Codacy Badgecodacy-badgeCodacy !js-semistandard-stylestandard-badgesemistandard !Licenselicense-badgeMIT License AngularJS Markdown using marked. Please note: neither this directive nor marked (by default) implement sanitization. As always, sanitizing is necessary for user-generated content.


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: ```html ```


```js var app = angular.module('example-app', 'hc.marked'); ```

Set default options (optional)

```js app.config('markedProvider', function (markedProvider) { markedProvider.setOptions({gfm: true}); }); ``` Example using highlight.js Javascript syntax highlighter (must include highlight.js script). ```js 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: ```js 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

```html # Markdown directive It works! ``` Bind the markdown input to a scope variable: ```html
``` Include a markdown file: ```html
``` Or a template (great for md that includes code blocks): ```html
``` Use ``compile`` attribute to support AngularJS directives inside markdown. ```html
<div marked src="''" compile="true"></div>
``` ```javascript .controller('ClickHandler', function() { this.doClick = function() {
}; }) ```

As a service

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


Install npm and bower dependencies: ```sh npm install bower install npm test ```


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.


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


Copyright (c) 2013-2015 Jayson Harshbarger MIT License