Introduction
Vim에서 Markdown 문법으로 작성한 .md 파일을 실시간으로 미리보기 위하여
여러가지 Vim Plugin들을 검색해 보았습니다. 가장 인기있는 (Github star가 높은)
방법은 suan의
vim-instant-markdown
이었습니다. 하지만 이 레포는 업데이트가 좀 오래되어서 좀 더 최신의 방법들을
찾아보았고 실패한 방법과 성공한 방법 한가지씩을 소개해 드리겠습니다.
- ref: https://github.com/JamshedVesuna/vim-markdown-preview (Failed)
- ref: https://github.com/shime/vim-livedown (Successful)
- ref: https://www.reddit.com/r/vim/comments/32tbwf/vim_and_markdown_mac/
Prerequisites
- Vundle: https://github.com/VundleVim/Vundle.vim
- Node, npm:
$ brew install node
Tested Specifications
- OS: Mac OS X 10.13.3
- Vim: Vim 8.0
Installations
실패한 방법
우선 Fandoc을 설치합니다.
$ brew install pandoc
그 다음 .vimrc 파일에서 다음을 추가하고 :PluginInstall을 타이핑해서
JamesdVesuna 의 vim-markdown-preview 플러그인을 설치합니다.
Plugin 'JamshedVesuna/vim-markdown-preview'
우리는 John MacFarlane의 Pandoc을 이용해 .md 파일을 .html로 렌더링 할
것이기 때문에 다음줄을 .vimrc에 추가해 줍니다.
let vim_markdown_preview_pandoc=1
위 플러그인의 렌더링 키매핑은 기본적으로 Ctrl-p 인데, 이것은 vim에서 자주
사용되는 Ctrl-P 플러그인과 키매핑이 겹치기 때문에 다음과 같이 키매핑을
바꿔줍니다.
let vim_markdown_preview_hotkey='<C-m>'
ERROR: 이유는 모르겠지만 위 방법대로 하면 preview가 보이지 않습니다..
성공한 방법
우선 shime의 livedown을 설치합니다.
$ npm install -g livedown
이후 Vundle을 이용해 shime의
vim-livedown을 설치합니다. 다음 줄을
.vimrc 파일에 추가해 주고 :PluginInstall을 타이핑해서 플러그인을
설치합니다.
Plugin 'shime/vim-livedown'
또한 편의를 위해 키매핑을 다음과 같이 설정합니다. 마찬가지로 다음 줄을
.vimrc에 추가합니다.
nnoremap <Leader>mm :LivedownToggle<CR>
이제 .md 파일에서 Vim을 이용해 작업하다 normal mode에서 <Leader>mm을 누르면
사파리에서 렌더링 된 Markdown 파일이 보여집니다.
Markdown to HTML
Preview 와는 별개로 .md 파일을 .html로 변환하여 그 내용을 다른 곳에
붙여넣어야 할 경우가 있습니다. 예를들어 블로그에 글을 쓰는 경우가 해당합니다.
우선 npm으로
mardown-to-html 패키지를 설치합니다.
$ npm install markdown-to-html -g
그 다음 다음 명령어를 통해 github-flavored-markdown 변환 결과를 Mac
클립보드에 붙여넣습니다.
$ github-markdown myfile.md | pbcopy
굳이 github-flavored를 쓰는 이유는 Vim에서 작업할 때 하나의 엔터는 한
문단으로 취급하기 위해서 입니다.
이후에 원하는 편집기 에디터에 Ctrl-V로 붙여넣으시면 됩니다.
MathJax Support
기본적으로 livedown은 MathJax를 지원하지 않습니다. 그러나 다음과 같이 간단한
수정으로 MathJax를 지원하게끔 설정할 수 있습니다.
우선 /usr/local/lib/node_modules/ 경로의 index.html 파일을 에디터로 열고,
<head> ... </head> 태그 사이에 다음을 붙여넣습니다.
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
이후 :LivedownToggle을 실행하면 수식이 잘 보입니다.