2020-12-28

JSで開発したMarkdownコンバータ RichMD v1.1.0 の機能解説

本日12/28にJSライブラリRichMD v1.1.0をリリースしました 🎉

www.npmjs.com

MarkdownからHTMLに変換してくれるコンバータですが、

「Markdownらしさを残しつつ、Markdownを超える機能を提供する」

をコンセプトに開発しました。

本来MarkdownはMarkdown記法をHTML記法に変換するのみで、クラス指定やスタイルシートの読み込みなどは管轄外でしたが、RichMDはスタイルシートの読み込みや特定のHTMLタグ作成&クラス指定にも対応しています。

今日はRichMDならではの独自機能を解説していきたいと思います。

数式(TeX記法)

RichMDはTeX記法にも対応しており、数式を作ることができます。

f:id:bebeji_nappa:20201228172817p:plain

参考: https://github.com/bebeji-nappa/richmd/blob/HEAD/docs/md-syntax.md#mathematical-formula-block-use-katex

カラーブロック

色のついたブロック内にテキストを書くことができます。デフォルトでは5色定義されています。メッセージを強調したい時に便利な機能です。

f:id:bebeji_nappa:20201228173222p:plain

参考: https://github.com/bebeji-nappa/richmd/blob/HEAD/docs/md-syntax.md#color-block

ドロップダウン

Markdownでは以下のドロップダウン機能を実装する際、直接HTMLを記述していましたが、RichMDでは独自記法を設定して実装しています。

これでドロップダウン機能の記述が簡単になります。

f:id:bebeji_nappa:20201228173609p:plain

参考: https://github.com/bebeji-nappa/richmd/blob/HEAD/docs/md-syntax.md#dropdown-details

RichMD CLI実装 & RichMD fileの誕生

そして、RichMDの大きな特徴は独自のCLIを搭載しているところです。

拡張子を .richmd で作成されたファイル(RichMD fileと名付けています)を読み込んで、HTMLに変換しています。

もちろん、先ほど紹介した独自記法にも対応しております。

これにより、下記の点ができるようになりました。

各自用意したCSSを独自記法で読み込む
特定のHTMLを独自記法で作成する

また v1.1.0 からファイルパスにディレクトリ指定することで、複数のRichMDファイルを同時にHTML変換・出力する事ができるようになりました。

これで RichMDファイルの使いやすさが格段に上がりました。

詳しい使い方は以下のURLにて。

richmd/usage-cli.md at master · bebeji-nappa/richmd · GitHub

なぜ、このようなことが出来るのか?

RichMDは他ライブラリに依存せず、Markdown(独自記法含む)パーサー&HTML変換を全て行うように開発されています。

このことにより、RichMD CLIなどの実装や独自記法の定義も可能になります。

当初RichMDファイルでHTML変換した場合、

TeXの数式描画やコードブロックのシンタックスハイライトは他ライブラリに依存していたため、変換後はCDNで呼び出すようにしていましたが、現在はRichMD側で呼び出している形式にしています。

今後の課題

RichMDにもまだ課題があります。それは、

React & Vue で RichMDファイルで使えるようにする

ことです。

現在では、RichMDファイルでの変換とReact & Vue でRichMDを使用した際の処理パターンが違うため、React & Vue で RichMDファイルが使えない状態になっています。
また、React & Vue で RichMDファイルを使うにはまだまだ解消しなければいけない壁が多いのも現状です。

今後はこちらを解消して、より使いやすいRichMDになるように開発を進めていきます。