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

Markdownはごく基本的な機能しか提供しないため、物足りないと考える人たちが多彩な拡張を行っています。一般的なHTMLコードを追加するほか、計算式を埋め込めるようにしたり、oembedに対応するなどです。

今回紹介するFangleはさらにMarkdownにインタラクティブ性を追加してくれるライブラリになります。

Fangleの使い方

元の文章になります。右側に変換結果があります。

テキストボックスでの計算を行うパターンです。

#### Number Box
His power level is [p1=5000[_]]. That's [how_much_1[p1 - 3000]] more than 3000.

実際に操作しているところです。

さらにレンジを使う場合。

#### Adjustable Number
His power level is [p2[5000..10000,1000]]. That's [how_much_2[p2 - 3000]] than 3000.

ちゃんとレンジで値が変わっているのが分かります。

クリックで文字が変わるパターンです。

#### Toggle
His power level is [p3=0[0,1]less than 9000.,OVER 9000!!!]

文字が切り替わります。

閾値を越えると文字が出るものです。

#### If
His power level is [p5=5000[5000..20000,1000]].[warning_1[p5 > 9000] IT'S OVER 9000!!!]

レンジを動かすと文字が表示されます。

最後は閾値によって文字が切り替わるものです。

#### Switch
His power level is [p6=5000[5000..20000,1000]]. It's [warning_2[(p6 < 8000),(p6 <= 9000),(p6 > 9000)]low.,almost 9000?!,OVER 9000!!!]

スライダを動かすと文字が切り替わります。

Fangleは特殊な記法によって、Markdownをよりダイナミックに変更できるようになります。ちょっと式が複雑すぎる気がしますが、こういった拡張性の高さもMarkdownの面白さかも知れません。

FangleはCoffeeScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Fangle rhymes with tangle

jotux/fangle: fangle creates interactive pages from plain text

 

MOONGIFTの関連記事

  • DevRel
  • Com2