angular-marked

WebJar for angular-marked

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-marked
Last Version

Last Version

1.2.2
Release Date

Release Date

Type

Type

jar
Description

Description

angular-marked
WebJar for angular-marked
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/Hypercubed/angular-marked

Download angular-marked

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-marked/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-marked</artifactId>
    <version>1.2.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-marked/
implementation 'org.webjars.bower:angular-marked:1.2.2'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-marked/
implementation ("org.webjars.bower:angular-marked:1.2.2")
'org.webjars.bower:angular-marked:jar:1.2.2'
<dependency org="org.webjars.bower" name="angular-marked" rev="1.2.2">
  <artifact name="angular-marked" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-marked', version='1.2.2')
)
libraryDependencies += "org.webjars.bower" % "angular-marked" % "1.2.2"
[org.webjars.bower/angular-marked "1.2.2"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.3.0,)
org.webjars.bower : marked jar [0.3.1,0.4)

Project Modules

There are no modules declared in this project.

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

Versions

Version
1.2.2
1.2.1
1.0.1
0.0.21