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

npm install angular-marked

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

MIT License

douglaswth/angular-marked