Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
363
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

GitHubリポジトリ

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から色々と派生アプリ作られたらいいなと思っています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
363
Help us understand the problem. What are the problem?