使用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