しゃのんあどべんとかれんだー 6日目 (Blogger で Markdown を試してみたおはなし) 匿名 匿名 この記事は [Shanon Advent Calendar 2015](http://qiita.com/advent-calendar/2015/shanon) の 6 日目の記事です。 ![Markdown](http://1.bp.blogspot.com/-Ws_z86ta47s/VopQuA2-C6I/AAAAAAAAAUU/I-Qw5ii5XOw/s200/markdown-512.png) # Blogger、書きづらい。。。 シャノンの技術ブログでは、Blogger というサービスを利用していますが、これが書きにくいったらありゃしないです。 今まで、私は Blogger のエディタ上でゴリゴリ HTML を書く作業をやってブログを書いていましたが、作業効率的にもよろしくないです。 何か楽に書く方法は無いのでしょうか? # そこで Markdown ですよ! Wikipedia 先生いわく、Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。 とのことですが、 たしかに、HTML より記述するタグ数が少なくて済むので、Markdown は断然書きやすくて作業効率が良い言語だと思います。 ### でもね、、、 Blogger には、Markdown で記述できるサービスが無いんです。 HTML タグを書くの、しんどい、ほんとしんどい。 何か良い策は無いのでしょうか? # JavaScript で何とかできるよ! [marked.js](https://github.com/chjj/marked) という JavaScript ライブラリを使うと、実現できました! [こちらのサンプルコード](https://github.com/chjj/marked#browser)にあるように、 ```marked('Markdown テキスト')``` を実行すると、整形された HTML タグ文字列が生成されるようです。 あとは、お好きな要素 (div 推奨でしょうか?) に innerHTML メソッド等で文字列を入れてやると、見事に Markdown が整形されて表示されるわけですね。 (ソースに興味のある方は、この記事の body タグの中身を見てみると良いかもです。 確実にテキストを書ける textarea タグ中に Markdown を書いておき、それを今回の記事の Markdown ソースとしています。) 処理を見てみると、正規表現で合致する文字列を定義しておき、それにヒットするかどうかをひたすらチェックする、努力の結晶な処理が行われている雰囲気です。 すごい。 #### ちょっと手を入れてみたいところ リンクに {:target="_blank"} 指定を加えた場合に、新規タブでリンク先が開くようにしたいです。。。 ピュアな Markdown ではないようですが、自身で機能を拡張できるのは楽しみがありますね。 既に他の方がプルリクエストを出しているかもしれませんが、機会を見ていじってみようと思います。 **これで、Markdown で記事かけるぞーい! Enjoy! (・ω・)ノ** Tweet Share Share Share Share