Numbers Prefer Multiplication

    loomio-angular-marked

    1.2.6 • Public • Published

    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

    Install

    npm i loomio-angular-marked

    DownloadsWeekly Downloads

    15

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • gdpelican