loomio/angular-marked

Name: angular-marked

Owner: Loomio

Description: Markdown in AngularJS using marked.

Forked from: Hypercubed/angular-marked

Created: 2017-06-06 10:10:37.0

Updated: 2018-01-11 01:20:16.0

Pushed: 2018-04-02 03:36:35.0

Homepage: http://hypercubed.github.io/angular-marked/

Size: 1068

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

angular-marked

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:

ipt src="bower_components/marked/lib/marked.js"></script>
ipt src="bower_components/angular-marked/dist/angular-marked.js"></script>

Usage

app = angular.module('example-app', ['hc.marked']);

Set default options (optional)

config(['markedProvider', function (markedProvider) {
rkedProvider.setOptions({gfm: true});

Example using highlight.js Javascript syntax highlighter (must include highlight.js script).

config(['markedProvider', function (markedProvider) {
rkedProvider.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:

config(['markedProvider', function (markedProvider) {
rkedProvider.setRenderer({
link: function(href, title, text) {
  return "<a href='" + href + "'" + (title ? " title='" + title + "'" : '') + " target='_blank'>" + text + "</a>";
}
;

Use as a directive

ked>
Markdown directive
t works!*  
rked>

Bind the markdown input to a scope variable:

 marked="my_markdown">
v>
 Uses $scope.my_markdown -->

Include a markdown file:

 marked src="'README.md'">
v>
 Uses markdown content from README.md -->

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

ipt type="text/ng-template" id="tpl.md">
 Markdown

Code blocks**

  This is <b>bold</b>

Ampersands**

ar Trek & Star Wars
ript>

 marked src="'tpl.md'"></div>
 Uses markdown content from tpl.md -->

Use `compile` attribute to support AngularJS directives inside markdown.

ipt type="text/ng-template" id="tpl.md">
 Markdown

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

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

ript>

 ng-controller="ClickHandler">
<div marked src="'tpl.md'" compile="true"></div>
v>

avascript
troller('ClickHandler', function() {
is.doClick = function() {
...

As a service

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

Testing

Install npm and bower dependencies:

install
r install
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