Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-marked

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-marked

AngularJS Markdown using marked.

  • 1.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.6K
increased by15.41%
Maintainers
1
Weekly downloads
 
Created
Source

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;
      }
    }
  });
}]);

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

Keywords

FAQs

Package last updated on 16 Jul 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc