でも続けることはやめてはいない。
最近、Markdownが気になる。流行に乗り遅れてしまった感があるけど、
このページを見て心踊ったからだ。
http://qiita.com/uzuki_aoba/items/a01f8b0b52ced69c8092
ここで紹介されている「Haroopad」は良さそうなのだけど、
こればかりに頼ってしまうのもなんだかなので、
勉強を兼ねてwebベースの簡易エディタを作ってみたいと思う。
概要
webベースリアルタイム更新
Markdown表記
コードのハイライト表示
mermaid.js対応
準備
ディレクトリ作成
今回はmdeとした。インストール
１．jQueryこれだけ[npm install jquery]
２．Markdownパーサー(marked)
これだけ [npm install marked]
３．ハイライト(highlight.js)
これだけ[npm install highlightjs]
４．Mermaid.js
これだけ[npm install mermaid --save-dev]
プログラム
１．[mde.php]※phpにしたのは、phpの簡易サーバーで動作確認したかったから
他意はない。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php ?> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <script src="node_modules/jquery/dist/jquery.min.js"></script> | |
| <script src="node_modules/marked/lib/marked.js"></script> | |
| <script src="node_modules/highlightjs/highlight.pack.js"></script> | |
| <script src="node_modules/mermaid/dist/mermaid.min.js"></script> | |
| <script src="mde.js"></script> | |
| <lint rel="stylesheet" href="node_modules/mermaid/dist/mermaid.css" /> | |
| <link rel="stylesheet" href="node_modules/highlightjs/styles/github.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col1"> | |
| <textarea id="editor" class="form-control"></textarea> | |
| </div> | |
| <div class="col2"> | |
| <div id="result"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <pre> | |
| <div class="mermaid"> | |
| sequenceDiagram | |
| Alice->>John: Hello John, how are you? | |
| John-->>Alice: Great! | |
| </div> | |
| </pre> | |
| </body> | |
| </html> |
２．[mde.js]
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| marked.setOptions({ | |
| langPrefix: '' | |
| }); | |
| $('#editor').keyup(function() { | |
| var src = $(this).val(); | |
| var html = marked(src); | |
| $('#result').html(html); | |
| $('pre code').each(function(i, block) { | |
| if(block.className == "mermaid"){ | |
| block.outerHTML = '<div class="mermaid">'+block.innerHTML+'</div>'; | |
| }else{ | |
| hljs.highlightBlock(block); | |
| } | |
| }); | |
| window.mermaid.init(); | |
| }); | |
| }); |
動かし方
作成した ディレクトリで[php -S 127.0.0.1:8080]とするすると
あ、フローチャートって書いたけど、シーケンス図だ…Orz
参考
以下のリンクがものすごく参考になった。http://qiita.com/opengl-8080/items/56b4b6a9d31bac0cb3e2
http://clmpractice.org/2015/05/21/rational-team-concert-open-social-widget-with-mermaid-markdown/
knsv.github.io/mermaid/
http://knsv.github.io/mermaid/usage.html
http://kannokanno.hatenablog.com/entry/2013/06/19/132042
http://qiita.com/amay077/items/704d48130e5cf17e8654
