• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Hypercubed/angular-marked: Markdown in AngularJS using marked.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

Hypercubed/angular-marked

开源软件地址(OpenSource Url):

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

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

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




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
tj/mdconf: Markdown driven configuration!发布时间:2022-08-18
下一篇:
lauritzsh/pandoc-markdown-template: Markdown templates for Pandoc发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap