vim自身でmarkdownをプレビュー確認するskanehira/preview-markdown.vimを使ってみた

vim自身でmarkdownをプレビュー確認するskanehira/preview-markdown.vimを使ってみた

Markdownの確認で画像を使っていない等のブラウザを使う必要性が少ないときに便利なプラグイン「skanehira/preview-markdown.vim」を使ってみました。うっかりHomeBrewでmdrをインストールしてしまったため無駄にハマりました。
Clock Icon2020.07.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

vimのMarkdownプレビュー確認方法は幾つかありますが、Terminal内で完結させる方法については知りませんでした。vimとはいえ流石に出来ないだろうと思っていたのです。

ところが、検索していると次の記事を見つけました。

markdown用のvimプラグインを検索した時に見覚えがなかったのですが、リリースが今年の始めである分、まだ検索に掛かりづらいのかもしれません。

特徴と使ってみた上での注意点を書いてみます。

skanehira/preview-markdown.vimの特徴

大きな特徴はTerminal上でmarkdownのプレビューが完結する点です。このプラグイン自体はWrapperのようなもので、実働はレンダリング用ライブラリにあります。

READMEに上がっているレンダリング用ライブラリは以下3つ。

3つの内で既に導入済みのものがある場合、mdrではなければg:preview_markdown_parserにて指定しておきます。尚、事前にPATHは通しておきましょう。

# glowを使う場合
let g:preview_markdown_parser=glow
# mdcatを使う場合
let g:preview_markdown_parser=mdcat

レンダリング用ライブラリ導入時の注意点

glowmdcatはHomeBrewからインストール可能ですが、mdrについてはHomeBrewに存在しません。同じ名称あるいは似たようなライブラリがありますが異なるものとなっています。

name desc HomeBrew
mdr Make diffs readable https://formulae.brew.sh/formula/mdr
mdrp Mac DVDRipper Pro https://formulae.brew.sh/formula/mdrp

HomeBrewから既にmdrを導入しているか、brew install mdrと実行した後にPreviewしようとすると正常には動作しない可能性があります。PATHの扱いで困る場合はglowmdcatを導入しましょう。またmdrを使う場合はリポジトリのreleaseから最新版を直接ダウンロードしましょう。

プレビュー操作

縦分割か横分割かのカスタマイズが可能です。縦にしたい場合はvimrcにg:preview_markdown_vertical = 1を指定しておきます。

% vim ~/.vimrc
let g:preview_markdown_vertical = 1
% vim any.md
:PreviewMarkdown

プレビュー操作自体は簡単ですが、分割後の操作について戸惑う場合は以下の手順で操作しましょう。Vimの分割窓操作と同じです。

# 分割終了
<ctrl-w> c
# 編集側に移動する
<ctrl-w> w
# プレビュー画面と編集側を入れ替える
<ctrl-w> x

注意点

プレビューしている状態で編集側を保存してもプレビュー側に反映はされません。また、編集側にフォーカスがある状態で分割終了すると、プレビュー結果を出力した一時ファイルが残る状態になります。操作ミスを防ぎつつ更新したい場合は、プレビュー状態では編集せず、プレビューを終了した後で行うとよいでしょう。

HTMLについては対象外で、タグの状態で表示されます。ブラウザを使ってプレビューを行える、iamcco/markdown-preview.nvimprevim/previmを利用しましょう。

あとがき

ブラウザでのプレビュー確認で全て完結するように思えますが、今回のプラグインは動作が軽量で且つ画像を表示しないことから、Markdown構造のチェックを気軽に行える点がメリットです。

ブラウザがタブを開きすぎ等により既に重くなっている場合や、画像を全く使っていない等、プレビュー確認を素早く済ませたい時やブラウザを使うまでもない場合におすすめです。

参考リンク

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.