Skip to content
Markdown in AngularJS using marked.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
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
lib More cleaning Jul 16, 2016
test Clean code Jul 16, 2016
.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 Add compile attribute to support AngularJS directive inside markdown Apr 27, 2016
gruntfile.js Merge #48, callback on error Apr 29, 2016
package.json 1.2.2 Jul 16, 2016 Refactor files Nov 9, 2015


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

You can’t perform that action at this time.