概要

自作ブログで投稿機能を作る祭に色々なライブラリのまとめが無く困ったことが合ったので、Qiita上に残そうと思います。
エディタを実現しているライブラリは以下の通リで、殆どが外部のものですが組み合わせることで簡単に実装することができます。
commonmark.js + highlight.js + mathjax.js

サンプル（JS Bin）

JS Bin on jsbin.com

エディタを実現している各種ライブラリ

▶ commonmark.js

Markdown -> HTMLを実現するJavaScriptライブラリ
Markdownの形式はCommonmarkという記法に則ったものを使用しています。
色々派生が多いので迷ったのですが、jsのライブラリで採用されているものが多いということでこれを使用。
実装方法はざっと⇣の感じ

// ライブラリからrendereとparserを読み込み
var GL ={};
GL.commonmark = window.commonmark;
GL.writer = new commonmark.HtmlRenderer({sourcepos: true});
GL.reader = new commonmark.Parser();

// Parsing
var textarea = $("#input_area");
var parsed = GL.reader.parse(textarea.val());

// Rendering
$("div#preview_area").html(GL.writer.render(parsed));

▶ highlight.js

<code><\/code>の内容をsyntax highlight（IDEのように文法によって色分け）するJavaScriptライブラリ
このsyntax highlightを実装するjsライブラリも多くの種類があります。
実装方法
- 特に変数や関数のオーバーライドは必要なく、<code>タグの要素を順に入れていくだけでOK

  // Syntax Highlight (Use "highlight.js")
  $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
  });

▶ MathJax

”Beautiful math in all browsers”というイカしたキャッチフレーズを持つ数式描画用Javascriptライブラリです。

MathJax はMathML、LaTeX、ASCIIMathML（英語版）で記述された数式をウェブブラウザ上で表示するクロスブラウザ（英語版）のJavaScriptライブラリである
（wikipediaより引用）

【コード（テキストエリア上に入力）】

$
\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
\tag{1}
$

【実行結果】
$
\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
\tag{1}
$

実装方法(公式ドキュメント)
- typesetというのは、英語的には属性を明示するなどという意味ですが、公式ドキュメントを見る限り、入力をコンパイル・レンダリングする事を指しているように思いますので、ここではmarkdownを入力としてHTMLを生成し#preview_areaに反映させることを指しているのではないかと考えられます。
- MathJaxは数式をSVGなどで描画する処理負荷の高いライブラリなので、例えば一文字一文字のTextareaの入力の変化毎に数式を再レンダリングをすることは現実的ではありません。
- そこでmarkdownを変更したタイミングでtypesetを実施すべき、とこのドキュメントでは言っているのだと理解しています（違ったらコメントください・・・）

HTMLのheadにて明記（

  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
    },
    CommonHTML: { matchFontHeight: false },
    displayAlign: "left",
    displayIndent: "2em"
  });
  </script>

markdownをhtmlに反映後に処理

  MathJax.Hub.Typeset(["Typeset",MathJax.Hub, "posts-preview"]);

まとめ

活用した外部ライブラリは以上です。

今回作成した簡易エディタは色んなライブラリのごった煮ではあります。しかし、組合せるだけでQiitaが実装しているようなエディタは簡単に実装できるということを紹介するのが本投稿の目的でした。
（もちろん、Qiitaには魅力的な他の機能も多くあります）

その他の機能として、

drag & dropでの画像アップローダ
入力文字の時間差反映

なども自作しているのですが、少し記事が長くなるので、別日に更新します。

commonmark.js + highlight.js + mathjax.jsでちょっとリッチなエディタを作ってみた（1/2）

概要