AngularJS Markdown using marked.
9 people use it
Author: 509946?v=3 Hypercubed
Submitted by: 509946? Hypercubed


AngularJS Markdown using marked.


  1. bower install Hypercubed/angular-marked
  2. Include the marked.js script into your app. By default should be at bower_components/marked/lib/marked.js.
  3. Include the angular-marked.js into your app (after marked.js). By default should be at bower_components/angular-marked/angular-marked.js.
  4. Add hc.marked as a module dependency to your app.

Set default options (optional)

app.config(['marked', function(marked) { marked.setOptions({gfm: true}); }]);

As a directive

<marked> #Markdown directive *It works!* </marked>

Bind the markdown input to a scope variable:

<div marked="markdown"> </div> <!-- Uses $scope.markdown -->

Include a markdown file:

<div marked ng-include="''"> </div> <!-- Uses content from -->

As a service

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


Install Karma: npm install -g karma and run karma start.


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.



comments powered by Disqus
This page was last updated over 4 years ago.