angular-marked

AngularJS Markdown using marked.

Downloads in past

Stats

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

Readme

angular-marked
!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.

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

Usage

```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="'tpl.md'" compile="true"></div>
``` ```javascript .controller('ClickHandler', function() { this.doClick = function() {
...
}; }) ```

As a service

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

Testing

Install npm and bower dependencies: ```sh 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