This page looks best with JavaScript enabled

WSLのVimでmarkdownのプレビューを見れるようにする

 ·   ·  ☕ 2 min read  ·  ✍️ coriander

WSLのVimでmarkdownの環境構築

READMEを作成する時やこのブログを書くときにmarkdownで書いていたのですが,プレビュー機能が標準のVimにないので,VSCodeのプレビューを使っていました()

PCの知識がほぼないのと,WSLでプレビューできるプラグインを入れている人が見つからなかったため今までプラグインがうまく動作していなかったんですが,最近もう一度設定したらうまく入ったのでセットアップ方法を説明します.

プラグインの導入

vim-markdown

markdownのシンタックスハイライトに関するプラグイン.

コードブロック内の言語にもシンタックスハイライトをつけることが出来るようになります.

deinで設定する場合はこんな感じの内容を書いたらいいと思います.

1
2
3
4
5
[[plugins]]
repo = 'tpope/vim-markdown'
hood_add = '''
  let g:markdown_fenced_langulages = ['html', 'python', 'cpp', 'bash=sh', 'toml']
  '''

previm

これが本題.

markdownで書いたファイルのプレビューをブラウザに表示してくれるプラグイン.

:PrevimOpenと入力することで作成したファイルのプレビューを表示してくれます.

一度プレビューを表示させると,その後は保存するたびに変更内容がプレビュー結果に反映されます.

設定方法はこんな感じ.

1
2
3
4
5
6
[[plugins]]
repo = 'kannokanno/previm'
hook_add = '''
  let g:previm_open_cmd = '/mnt/c/Program\ Files\ \(x86\)/Google/Chrome/Application/chrome.exe'
  let g:previm_wsl_mode = 1
  '''

ここでブラウザのパスは各自のPCの設定に合わせてください.

感想

PCの知識が乏しいせいで自分の環境にmarkdownのプレビュー機能を入れることが出来なかったため,VSCodeに変えようかな…と思っていましたが,何とかprevimを動かすことが出来たのでエディタを変更せずに済みました()

プラグイン開発者のみなさん本当にありがとうございますm(__)m

参考

Share on

coriander
WRITTEN BY
coriander
student