尝试使用 JavaScript 显示 Markdown 文档

1 年 ago
逸, 科
4 minutes

这是一篇展示结果的演示文章。它使用 JavaScript 将 Markdown 渲染为网页。
→ http://hkusu.github.io/angularjs-markdown-demo/dist
（换行可能不正常，但请不要在意细节..）

这次的政策

    • Markdown は GitHub 形式とします

コードハイライトに対応します
絵文字に対応します

AngularJS でやります

AngularJS でなくても marked や Highlight.js を使えばできると思います

動作確認として Qiita の新着投稿を表示します

Qiita API v1 を利用します

v2 を利用ない理由としては、v2 だとクロスオリジン制約にひっかかる為

前提条件。 (Qian ti tiao jian)

我的当前环境如下所示。

操作系统：Mac OS X 10.9.5
Gulp：3.8.10
YEOMAN(yo)：1.3.2
generator-gulp-angular：0.7.3

经以下步骤安装后，最终结果的版本如下。

AngularJS版本：1.3.9
anguar-marked版本：0.0.12
maked版本：0.3.2
highlightjs版本：8.4.0
angular-emoji-filter版本：0.0.2

步骤

生成 AngularJS 项目的基本框架

创建一个合适的目录并启动生成器。

$ mkir angularjs-markdown-demo
$ cd angularjs-markdown-demo
$ yo gulp-angular

这次随便选一个选项，无论什么都可以。

スクリーンショット 2015-01-15 15.19.34.png

一旦蓝本完成后，使用命令“$ gulp serve”进行确认运行。

スクリーンショット 2015-01-15 15.24.35.png

② 引入 angular-marked 和 Highlight.js

引入angular-marked和Highlight.js。

顺便提一下，Highlight.js 是下面这个链接的官方吗？我尝试了，但不能正常运行。
https://github.com/isagalaev/highlight.js

導入步驟基本上就是按照上述 GitHub 的 README 中所說的那樣。

$ bower install angular-marked --save
$ bower install highlightjs --save

可以选择使用 “gulp wiredep”，或者修改 index.html。

〜

<!-- build:css({.tmp,src}) styles/vendor.css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<!-- bower:css -->
+<link rel="stylesheet" href="../bower_components/highlightjs/styles/default.css" />
<!-- endbower -->
<!-- endbuild -->

〜

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+<script src="../bower_components/angular-marked/angular-marked.js"></script>
+<script src="../bower_components/highlightjs/highlight.pack.js"></script>
<!-- endbower -->
+<script src="../bower_components/marked/lib/marked.js"></script>
<!-- endbuild -->

〜

由于我这里的 marked.js 没有被 $ gulp wiredep 自动添加进去，所以我手动添加了它。

在AngularJS应用程序中加入（添加了’hc.marked’，以及完整添加了第二个.config）。

'use strict';

angular.module('angularjsMarkdownDemo', ['ngSanitize', 'ui.router', 'hc.marked'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl'
      });

    $urlRouterProvider.otherwise('/');
  })
  .config(['markedProvider', function(markedProvider) {
    markedProvider.setOptions({
      gfm: true,
      tables: true,
      highlight: function (code) {
        return hljs.highlightAuto(code).value;
      }
    });
  }])
;

现在，带有代码高亮的 Markdown 显示已经准备就绪。

③ 引入 AngularJS 表情符号过滤器

为了显示更多的表情符号（如:smale:），我们将引入AngularJS Emoji Filter。

$ bower install angular-emoji-filter --save

是否使用 gulp wiredep 还是手动修改 index.html。

〜

<!-- build:css({.tmp,src}) styles/vendor.css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/highlightjs/styles/default.css" />
<!-- endbower -->
+<link rel="stylesheet" href="../bower_components/angular-emoji-filter/dist/emoji.min.css" />
<!-- endbuild -->

〜

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-marked/angular-marked.js"></script>
<script src="../bower_components/highlightjs/highlight.pack.js"></script>
+<script src="../bower_components/angular-emoji-filter/dist/emoji.min.js"></script>
<!-- endbower -->
<script src="../bower_components/marked/lib/marked.js"></script>
<!-- endbuild -->

〜

由于emoji.min.css在 $ gulp wiredep 中没有被添加，所以我手动添加了它。

将’emoji’作为补充，嵌入AngularJS应用程序中。

'use strict';

angular.module('angularjsMarkdownDemo', ['ngSanitize', 'ui.router', 'hc.marked', 'emoji'])
  .config(function ($stateProvider, $urlRouterProvider) {
〜

以上就准备好展示表情符号了。

尝试显示 Markdown

通过使用Qiita API v1，获取适当的文章。文章的内容存储在响应的JSON的raw_body字段中。

'use strict';

angular.module('angularjsMarkdownDemo')
  .controller('MainCtrl', function ($scope, $http) {

    $scope.raw_body = "";

    $http.get('https://qiita.com/api/v1/items/f77211edf0f4ab7561ca').success(function(item) {
      $scope.raw_body = item.raw_body;
    });

  });

使用 Markdown 格式来显示所获取文章的内容。

<div class="container">
  <ng-if raw_body != "">
    <div marked="raw_body|emoji"></div>
  </ng-if>
</div>

angular-marked 的用法已经写在 README 中，但这次的重点是在

这里动态插入值。
（但是如果使用这种方法，在插入值之前运行指令会报错，因此我们使用ng-if来判断值是否存在来进行显示。）

我們進行了以下調整，以應對圖像太大時溢出的問題，以及表情符號的垂直位置不居中的問題。

img {
  max-width: 100%;
  height: auto;
}

i.emoji {
  vertical-align: middle;
}

如果要为部署而构建，可以使用$ gulp build命令，将部署文件解压到dist目录中。但是，为了表情符号图片（emoji.png），我手动将bower_components/angular-emoji-filter/dist/emoji.png复制到dist/style/emoji.png。（或者您可以修改Gulp任务来处理这件事。）

这是演示的链接：http://hkusu.github.io/angularjs-markdown-demo/dist。

最后

源代码将会放在这里。
⇒ https://github.com/hkusu/angularjs-markdown-demo

✖
广告
将在 10 秒后关闭
bannerAds