作るもの

こんなの

左のテキストエリアに 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 を書く

editor.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 を書く

editor.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を簡単比較 - ぼっち勉強会を参照のこと。

$('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});

ここで、全コードブロックに highlight.js を適用している。

github.css で bootstrap　の css を上書きしているのが若干怪しいけど、とりあえずそれっぽくなった。

簡単なMarkdownエディタを作る