使用Angular来显示Markdown

由于最近的Angular在sanitize方面进行了加强,filter的实现似乎有些困难(不可能?),所以我们使用了directive版本。希望能够像Vue.js的演示那样直观…

组成要素

由于Angular没有转换为CommonJS,所以它有一些独特的特点,但使用Debowerify可以使其在Browserify中能够工作。

通过宝尔(Bower)

    angular

通过npm

    • browserify

 

    • debowerify: Browserifyのトランスフォーム

 

    • coffeeify: Browserifyのトランスフォーム

 

    marked: Markdownの変換エンジン

执行

最终呈现如下。指令的定义大约为5行左右。Angular和CoffeeScript的搭配非常完美啊。

index.coffee 索引文件

require 'angular'

angular.module 'app', []
.directive 'marked', require './marked'

标记的咖啡

因为长度不够长,所以并不需要将文件分开,但为了方便重新使用,还是这样做了。

marked = require 'marked'

module.exports = ->
  restrict: 'A'
  link: (scope, element, attrs) ->
    element.html marked element.text()

主页.html .html)

在想要使用Markdown的标签上添加了一个名为marked的自定义属性。虽然Markdown可以直接编写,但在这个例子中是从另一个文件进行包含的。

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Markdown</title>
  </head>
  <body>
    <section marked ng-include="'sample.md'"></section>
    <script src="index.js"></script>
  </body>
</html>

样品.md

# Sample Markdown

- Angular.js
- Browserify
- Debowerify
- Coffeeify
- Marked
广告
将在 10 秒后关闭
bannerAds