Skip to content
Markdown in AngularJS using marked.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Clean code Jul 16, 2016
docs-template Merge #48, callback on error Apr 29, 2016
example
lib More cleaning Jul 16, 2016
test Clean code Jul 16, 2016
.editorconfig
.gitattributes add .gitattributes Nov 14, 2015
.gitignore ngDocs WIP Sep 20, 2014
.npmignore Add dist folder to npm package Nov 22, 2015
.travis.yml Update .travis.yml Nov 9, 2015
README.md Add compile attribute to support AngularJS directive inside markdown Apr 27, 2016
bower.json
gruntfile.js Merge #48, callback on error Apr 29, 2016
karma.conf.js
package.json 1.2.2 Jul 16, 2016
todo.md Refactor files Nov 9, 2015

README.md

angular-marked

NPM version Downloads Downloads

Build Status Codacy Badge

js-semistandard-style 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:

<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

MIT License

You can’t perform that action at this time.