Markdown in AngularJS using marked.
Latest commit c10be54 Jul 16, 2016 @Hypercubed 1.2.2


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.


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>


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) {
    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) {
    link: function(href, title, text) {
      return "<a href='" + href + "'" + (title ? " title='" + title + "'" : '') + " target='_blank'>" + text + "</a>";

Use as a directive

  # Markdown directive
  *It works!*  

Bind the markdown input to a scope variable:

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

Include a markdown file:

<div marked src="''">
<!-- Uses markdown content from -->

Or a template (great for md that includes code blocks):

<script type="text/ng-template" id="">
  ## Markdown

  **Code blocks**

      This is <b>bold</b>


  Star Trek & Star Wars

<div marked src="''"></div>
<!-- Uses markdown content from -->

Use compile attribute to support AngularJS directives inside markdown.

<script type="text/ng-template" id="">
  ## Markdown

  **This will go through $compile and will be effective**

  <button ng-click="doClick()"></button>


<div ng-controller="ClickHandler">
    <div marked src="''" compile="true"></div>
.controller('ClickHandler', function() {
  this.doClick = function() {

As a service

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


Install npm and bower dependencies:

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