- 自作 Web アプリに簡単な Markdown エディタを入れたくなった。
- 埋込み型のエディタ はあるっぽい。
- でもそんな高機能でなくていいし、いちいち使い方調べるのシンドイし、 Markdown の JavaScript 用パーサーはあるみたい だから簡単に作れそう。
- 作ってみたら、３０分くらいですぐにできた。
ということで作り方メモ。
#作るもの
こんなの
左のテキストエリアに Markdown を記述すると、右側に結果が出力される。
opengl-8080/SimpleMarkdownEditor
#用意するもの
##Markdown のパーサー
Markdown で書いたテキストをパースして、 HTML を吐き出すパーサー。
marked を使ってみる。
##コードのハイライト
コードブロックをハイライトしてくれるライブラリ。
highlight.js を使ってみる。
##スタイル設定
marked が出力するのはただの HTML なので、いい感じに見た目を調整してくれる CSS を使う。
「css markdown」 でググったら、トップに Github 風の見た目にしてくれる CSS があったので、これを使ってみる。
##その他
あと他に、 jQuery と、 基本的なスタイル調整用に bootstrap を使う。
#仕組み
- テキストエリアの keyup イベントを監視する。
- テキストエリアの内容を取得する。
- marked にパースさせる。
- パース結果を HTML として出力する。
- hightlight.js でコードブロックをハイライトする。
#作り方
##HTML を書く
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/marked/lib/marked.js"></script>
<script src="bower_components/highlightjs/highlight.pack.js"></script>
<script src="editor.js"></script>
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="github.css" />
<link rel="stylesheet" href="editor.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<textarea id="editor" class="form-control"></textarea>
</div>
<div class="col-xs-6">
<div id="result"></div>
</div>
</div>
</div>
</body>
</html>
使用するライブラリの js と css ファイルを読み込んで、テキストエリアと出力先の div タグを配置している。
##JS を書く
$(function() {
marked.setOptions({
langPrefix: ''
});
$('#editor').keyup(function() {
var src = $(this).val();
var html = marked(src);
$('#result').html(html);
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
});
特に難しいところはなく、「仕組み」をそのまま実装した感じ。
marked.setOptions() の設定は、 highlight.js との連携で必要になる。
詳しくは [JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会] (http://kannokanno.hatenablog.com/entry/2013/06/19/132042) を参照のこと。
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
ここで、全コードブロックに highlight.js を適用している。
github.css で bootstrap の css を上書きしているのが若干怪しいけど、とりあえずそれっぽくなった。
#参考