ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近注目が集まりはじめているReact。特に良さそうなのがViewを抽象化しているのでReact CanvasやReact Nativeのような使い方へ発展している点です。困難はありそうですが面白そうな取り組みです。

今回はそんなReactを使ってMarkdownをレンダリングするmd2reactを紹介します。Markdown記法を使ったサイトは増えていますので、Reactと組み合わせる時に活躍しそうです。

md2reactの使い方。

コードは次のようになります。

global.React = require('react');
var md2react = require('md2react');

var md = '# Hello md2react';
var html = React.renderToString(md2react(md));

左が編集画面。右側がレンダリング結果です。
左が編集画面。右側がレンダリング結果です。

日本語も使えます。
日本語も使えます。

画像を埋め込むこともできます。
画像を埋め込むこともできます。

DOMの操作を任せられるReactを使うことで描画の更新も高速に行われています。使い方もシンプルで分かりやすいのではないでしょうか。こういったライブラリは今後、さらに増えていくものと思われます。

md2reactはJavaScript製、React用のオープンソース・ソフトウェア(MIT License)です。

md2react playground

mizchi/md2react

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2