読者です 読者をやめる 読者になる 読者になる

Vim - 依存ツールなしにMarkdownプレビューできるprevimプラグインを作った

vim

previm

previmというのを作りました。
作った経緯と、本プラグインの特徴を書きます。

既存のVim + Markdown環境は外部ツールが必要なものが多い

Vim + Markdown環境は好みが別れるのか、色々とあります。

quickrun + 何かしらの変換ツール

Hack #230: Markdown形式の文書を書く2 (quickrun0.5.0対応版)

  • 上記リンクにある何かしらの変換ツールが必要

mkdpreview-vim

Vimで編集中のMarkdownをプレビュー出来るプラグイン書いた

  • 上記リンクにあるいくつかのツールが必要

instant-markdown-d

VimでMarkdownをGitHub風にリアルタイムプレビュー

  • Rubyが必要
  • Node.jsが必要

Marked(Mac用)

vim-quickrunとMarkedでmarkdown編集が快適になった

  • 専用アプリが必要

Kobito(Mac用)

Vim+kobitoで快適 Markdown編集♪

  • 専用アプリが必要

Vimに絞って検索してみるとこれだけあります。
私の知らないだけでもっとあるかもしれません。

ただ私が調べたところだと、どれも外部ツールに依存していました。
PythonしかりRubyしかりNodeしかりHaskellしかり。

外部ツールのインストールなしだと、以下もあります。

Markdown Previewer

楽して Markdown ファイルをリアルタイムプレビューできる仕組みを作ったった
Markdown Previewer

これはドラッグアンドドロップでファイルを渡すと、それ以降はローカルの編集と同期してリアルタイム更新されるものです。
サービスですので特別インストールが必要なものもありません。

とても素晴らしかったのですが、「ドラッグアンドドロップする」というのが個人的にはかなり面倒でした。

ということで乱立している状況でもう一つ、勢いでオレオレプラグインを作りました。

previmプラグインの特徴

kannokanno/previm

いいところ

まず、Vimだけで完結します。
必要な外部ツールはありません。open-browser.vimを使うことが出来ますが、必須ではありません。

あとはリアルタイムプレビューっぽく動きます。
厳密には「最大1秒以内に同期を取って自動で反映します」。

ダメなところ

CSSが微妙で、Githubなどのような綺麗なスタイルにはなっていません。
全く何もないのも見にくかったので、気休めにTwitter Bootstrapを当てています。

次に、スクロールするためにブラウザにフォーカス戻して動かすのが面倒です。
1画面に収まる程度ならいいのですが、長くなってしまうとリアルタイムプレビューの意味がなくなっています。
ここは一応思い付きはあって、Vim上からスクロールできるんじゃないかという気もしているんですが、面倒でまだ試していません。

※追記ここから

  • 画面最下部だったらスクロールする、というのはjs側で簡単に対応できる気がしてきた。あとでやろう

  • 文字コードをちゃんと意識する

    • => 1.1 で対応しました

※追記ここまで

動作確認

今日作ってさらっと動かした程度ですので、全然検証はできていません。
自分のMac環境なら動くのを確認していますが、WindowsとLinuxがどうかは分かりません。

Google Chromeを使う場合の注意

※追記ここから

6/16:対応しました。
Vim - previmがGoogle ChromeとOperaに対応

※追記ここまで

READMEにもヘルプにも書いてありますが、Chromeに関してはそのままでは動きません。
プレビュー用のブラウザを指定できるので、Chrome以外を使うのがいいと思います。

動かない理由はChromeのSame-Origin-Policyのせいです。
同期反映のためにローカル(file://)のjsを読み込もうとするのですが、それがエラーになります。

参考:Javascript: Same origin policy を回避する

おわり

問題等があればissueでも@kanno_kannoにでもお気軽にお願いします。