Markdownをプレビューなしで見たまま編集できるOSSを発見!


何がMarkdownプレビューの問題か?

多くのマークダウンエディタは、エディタとプレビューが分かれているのが当たり前になっています。対応関係を考えなら編集する不便があります。長くなるに連れてスクロール同期の質なども影響してきます。LaTeXで論文書くときも同じ苦労があります。例えば、Microsoft WordやScrapboxのようにWYSIWYG = What You See Is What You Getだとより書きやすくなります。

"見たままの編集"とエンジニアに優しいMarkdownの融合はとても強力だと思います。


OSSのMarkdownエディタ - HyperMD

念願だった見たまま編集できるHyperMDというOSSのプロジェクトを発見しました!

hyper-md-top-for-qiita.mp4.opt.gif


GiHubリポジトリ

https://github.com/laobubu/HyperMD


Typoraという存在

Typoraという同じような目的のプロジェクトは以前から知られていますが、OSSでないことが欠点だと思っていました。それがHyperMDによって解決していてそこがHyperMDの魅力だと思います。


表(テーブル)の編集

表の編集もすごくスムーズです。

hyper-md-table.mp4.opt.gif

表の編集は見たままの編集がすごく発揮するのではないかと思います。


数式の対応

Qiita同様MathJaxで数式に対応しています。

hyper-md-math.mp4.opt.gif


HTMLの編集

Markdownで併用できるHTMLもパカっと開いて編集できます。

hyper-md-html-open.mp4.opt.gif

嬉しいことに、公式READMMEに"And more"に"HTML in Markdown -- WYSIWIG MDX is possible"という項目があるためHTMLの編集もより見たままで編集できるようになる可能性があります。

今日見つけたばかりで、かゆいところに手が届く感じしてて、まだまだ便利だなと思う機能が沢山ありそうです。


手元でHyperMDを試したい!

Glitchで手軽に試します。以下がnpmのプロジェクトです。HyperMD公式にあったものを利用してます。Parcelが使われていて短い設定でHyperMDが試せます。

GitHubリポジトリ: https://github.com/nwtgck/nwtgck-hypermd

実際のアプリケーション: https://nwtgck-hypermd.glitch.me

上記のリポジトリをcloneしたりして、自分でいろいろ試していけると思います。


もっと例が見たい

以下がオンラインで動く例のまとめです。

http://laobubu.net/HyperMD/docs/examples/

実際のコードはこちらにあります。

https://github.com/laobubu/HyperMD/tree/master/docs/examples

最初の例だと、HyperMDの見たままの編集と通常のエディタ(CodeMirrorが使われている)に切り替える例です。

hypermd-example1.mp4.opt.gif

例には、その他絵文字のサジェスト機能とか、Mermaidによるフローチャートやシーケンス図を書いたりする例などいろいろ見つかります。


きっかけのツイート

きっかけになった自分のツイートです。

Twitter上では、「HyperMDでローカルファイル編集したいな」などの声も上がっていて、HyperMDから色々と派生アプリ作られたらいいなと思っています。