MarkdownとAsciidocのプレビューア「Markuprev」を作った

MarkdownとAsciidocのプレビューアである「Markuprev」というアプリを作りました．

動作デモ

このような感じで，指定されたファイルを監視し，ファイルの変更を検知してHTMLにコンバートされた結果を表示してくれます．ファイルの編集機能はなく，編集は好きなエディタを使うことを前提にしています．

ソースコード

こちらにMITライセンスで公開しています．

ottijp/markuprev: markup previewer

バイナリ

こちらからMac用，Windows用のバイナリファイルをダウンロードできます．

Releases · ottijp/markuprev

なぜ作ったか

previmの手の届かないところ

普段vimを使っていて，前からプレビュー用のプラグインであるprevimにお世話になっていました．とても便利でなのですが，編集中のファイルが更新されると，それがプレビューされるので，特定のファイルのプレビューをロックしたい場面で少し困っていました．例えば，会議中に投影する資料をプレビューで表示しておきたいけど，議事録の編集をするとそれがプレビューされてしまう，などです．特定のファイルのプレビューをロックしたり，複数のファイルを同時編集しながら両方をプレビューしたい場合に，previmではちょっと手の届かない状況が発生していました．

また，previmはAsciidocのプレビューもできるのですが，Asciidoctorで出力される表現と異なるところが多く（特に表）， Asciidoctorの出力を想定していると，プレビューとして少し不十分さを感じていました．

これを解決したかったです．

周りの人に軽量マークアップ言語を使ってほしい

私の周りでは，ドキュメントをExcelやPowerPointで書く人が多く，それぞれのツールが適したケースなら良いのですが，そうでない場合も不適切に使われているので，問題視しています． Typoraなどのツールを勧めて使ってもらったりしたのですが，Markdownだけだとどうしても表現が限定されるのか，いまいち定着しませんでした．必要に応じてAsciidocを選択すると良いのですが，こちらは環境構築のハードルを高く感じる人が多かったです．

そこで，軽量マークアップ言語が適したケースで，周りの人が簡単にそれを選択し使えるようになるために， MarkdownもAsciidocも，単体のアプリケーションの実行だけでプレビューできるアプリが必要と考えました．

（定着しないのはWYSIWIGでないこと自体が原因かもしれませんが・・・．）

好きなエディタを使いたい

前述したTyporaなど，MarkdownやAsciidocプレビューできるアプリは色々あります．私は普段Vimを使っていて，編集自体はVimで行いたいので，プレビューだけを行ってくれるアプリが欲しかったのですが，調べてみても，このニーズにマッチするアプリが見つからなかったので，作ることにしました．

単一HTMLのエクスポート

作った書類は，他者に提供することも多く，そのたびにpandocを使って変換していました． previmのプレビューHTMLを保存しなかったのは，画像をインライン化した状態で保存（単一HTML化）したかったからです．これもプレビューアの機能にほしかった点です．

どういうものが必要だったか

次が実現できるものが必要でした．

Markdownのプレビュー
- 表やチェックボックスなど，GitHub Flavor形式に対応
Asciidocのプレビュー
- Asciidoctorの出力に対応
ファイルの変更を検知してプレビューを自動更新
MacとWindowsで動作
エディタから編集中ファイルのプレビューを連携起動
画像をインライン化したHTMLのエクスポート

作ったもの

Vue CLIと，vue-cli-plugin-electron-builderを使い， Electronアプリとしてプレビューアを作成しました． Markdownのコンバートはmarkdown-it， Asciidoctorのコンバートはasciidoctor を使っています．

起動時に引数で監視対象ファイルを指定できるようにしているので，エディタから外部プロセスを起動すれば，編集中ファイルのプレビューを連携起動できます．例えばVimであれば，次のようなスクリプトを定義しておけば，:MarkuPrevコマンドで起動できます．

.vimrc

" for mac
function! OpenWithMarkuPrev()
  echo system('open /Applications/MarkuPrev.app' . ' -n --args ' . shellescape(expand('%:p')))
endfunction
command! MarkuPrev call OpenWithMarkuPrev()

" for windows
function! OpenWithMarkuPrev()
  echo system('path/to/MarkuPrev.exe' . ' ' . shellescape(expand('%:p')))
endfunction
command! MarkuPrev call OpenWithMarkuPrev()