See markdown preview in vim: vim에서 마크다운 미리보기

나는 블로그 포스트 등 거의 모든 텍스트를 vim으로 작성한다.

그러다 보니 typora, marked 등 마크다운 편집기들이 제공하는 프리뷰 기능을 사용하지 못했는데, 찾아보니 vim에서도 동일하게 preview를 제공해주는 괜찮은 플러그인이 있어서 소개한다.

많은 플러그인이 있는데, 내가 선택한 플러그인은 vim-markdown-preview

이름은 nvim이지만 neovim 말고 vim8.1 이상에서도 사용 가능하다. 나는 vim8이상을 사용중이며 설치 방법도 쉬워 보이고, 다양한 기능을 제공하며 실시간 수정이 반영되는 점에서 해당 플러그인을 선택하였다. (github star 수도 많았다)

예시: 상당히 화려하게 사용하는데 사실 나는 header, list, image, code block 이외에는 잘 사용하지 않는다.

설치

(vim-plug로 설치하는 방법: vim-plug 사용법에 대한 포스트는 여기 참고)

• 다음을 ~/.vimrc에 추가한다.

" nodejs와 yarn이 설치되어 있다면 아래 라인 추가
" 아마 대부분의 웹 개발자는 있을 것(?)
Plug 'iamcco/markdown-preview.nvim', { 'do': 'cd app & yarn install'  }

" nodejs, yarn이 설치되어 있지 않으면 다음 라인을 추가
Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() } }

• 플러그인 설치하기

:source ~/.vimrc
:PlugInstall

Command

• 현재 버퍼의 프리뷰를 보려면 다음 명령어를 실행하면 된다.

• 자동으로 브라우저에 localhost로 프리뷰를 띄워준다.

  :MarkdownPreview

• 프리뷰를 종료하려면

  :MarkdownPreviewStop

• 사용 중에 vim buffer 상태에 따라 프리뷰 연동이 끊어지는 경우가 종종 있었는데 그런 경우 다시 :MarkdownPreview로 띄워주면 된다.

---

English

I wrote almost every text in vim - including blog post and markdown.

There's plenty of plugins to see markdown preview in vim. I usevim-markdown-preview. It's easy to install, and it has simple functionality.

> Sample image from the markdown-preview.nvim

It only works on vim >= 8.1 or neovim

Installation

(Install with vim-plug)

• Add below to ~/.vimrc

" If you don't have nodejs and yarn 
" use pre build 
Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() } } 

" If you have nodejs and yarn 
Plug 'iamcco/markdown-preview.nvim', { 'do': 'cd app & yarn install' }

• Install plugin

:source ~/.vimrc :PlugInstall

Command

• To starting preview current buffer, type

• It automatically opens the browser preview.

:MarkdownPreview

• To stoping preview, just type

:MarkdownPreviewStop