React＋marked＋highlight

bmf-san アプリケーション
#ES6#React#highlightjs#markdown#marked

wysiwygエディタではなく、マークダウンエディタをReactでつくってみました。

ソースコードの大部分はReact入門を参考にさせていただきました。

雑なgifサンプルはこちら_(:3」∠)_ markdown.gif

環境

  • React
  • marked(github)・・・マークダウンパーサー
  • highlight.js(highlightjs.org)・・・シンタックスハイライト
  • bower・・・上記全てのパッケージ管理に使用

準備

markedとhighlight.jsをbowerでインストール

bower install marked bower install highlightjs

それぞれご自分の環境にインストールしてパスの設定までしておいてください。 bower install highlightではなく、highlightjsです。 両者は別物ようで、私はこれを間違えていたせいて小一時間ハマりました・・・・（泣）

実装

htmlはこんな感じで↓

index.html

シンタックスハイライトに使用するカラーテーマはmonokaiが好きなのでmonokaiのスタイルシートを設定しました。 babelについては今回CDNを使用していますが、bowerでインストールしてもOKです。

さて、Reactコンポーネントを作っていきますが、冒頭でも述べたように、大部分はReact入門を参考にしているので、こちらを一読しておくとよろしいかと思います。

参考ソースにhighlight.jsの設定コードだけ追加した感じです。（全然仕事していないｗｗ）

markdown.js

テキストの入力部分のコンポーネント、　マークダウンの出力部分のコンポーネント、それらを統合するコンポーネントの3つに分割されています。

マークダウンのパースはmarkedという関数で行っています。 このmarked関数のオプションをcomponentDidUpdateのところでhighlight.jsを使うよう設定しています。 オプションの設定方法についてはhighlight.jsのREADMEにかいてあります。

dangerouslySetInnerHTMLというのはxss対策でデータをサニタイズするプロパティです。

所感

初めてエディタつくったのですが、ライブラリでパパっと出来てしまうのですね〜(:3」∠)

ES6バージョン

先日、ES6を勉強したので書き換えてみました。propsTypeの対応方法はよくわからなかったので省略してしまいましたｗ