마크다운(Markdown)용 VIM Preview Plugin 사용법

 

마크다운(Markdown)?

얼마 전에 마크다운(Markdown)이란 것을 새로 접했습니다. 위키처럼 텍스트 기반으로 편하게 문서를 작성할 수 있고, 문법 자체도 아주 직관적이어서 배우기 쉽더군요. 물론, 여기서 직관적이라는 건... 사람에 따라 조금 다르게 느낄 수도 있는 부분이지만, 위키를 한번 접해보신 분이라면 "아하~!!"라고 하실 겁니다.

그래서 루비 온 레일즈(Ruby on Rails)의 튜토리얼을 보고 간단하게 만든 사이트에 마크다운 파서인 레드카펫(Redcarpet)을 설치해서 마크다운 블로그를 만들었습니다.

사실 마크다운 형식으로 쓴 글을 파싱해서 보여주는 것이 전부라 블로그라고 하기도 좀 그렇지만... 일단 대략 완성되었으니 한번 공개해봅니다. ^^;;;; kkamagui의 마크다운 블로그로 바로가기~!! 간단 마크다운 문법 정리로 가면 마크다운 문법이 어떤 것이고 어떻게 보이는지를 간단히 확인할 수 있으니 궁금하시면 한번 들러보시기 바랍니다. ^^;;;

새로 만든 블로그에 글을 적다보니 약간 불편한 점이 있더군요. 글 쓰는 것 자체는 편해졌는데, 단지 웹에서 작업을 해야 한다는 것이 좀 불편했습니다. 만일 로컬에서도 작업할 수 있다면, VI 에디터에서 글을 쓰고 바로바로 확인하는 방법으로 더 편하게 작업할 수 있을 테니까요. ^^;;;

그래서 찾아보던중... 아웃사이더님의 블로그에서 VIM Plugin을 발견했습니다. VIM에서 작업하다가 Command Line에 :Mm만치면 웹 브라우저에서 바로 확인할 수 있는 멋진 녀석이더군요. ;)

VIM Markdown Preview 설치 방법

설치방법 또한 아주 간단했습니다. vim-markdown-preview사이트로 이동해서 파일을 다운로드한 뒤, plugin 폴더와 doc 폴더의 모든 파일을 홈 디렉터리 아래에 있는 .vim 디렉터리 아래에 넣어두면 됩니다. ^^;;; 직접 복사하는 것이 귀찮다면 아래처럼 install.sh를 직접 실행하셔도 됩니다. 단, 홈 디렉터리 아래에 .vim/plugin 폴더가 이미 생성되어 있어야 합니다.

$> install.sh

실행 방법

설치가 모두 끝났다면 vim으로 파일을 하나 열어서 아래처럼 텍스트를 그대로 입력한 다음 Command Line에 :Mm을 입력해보세요. 기본 CSS가 Github Style로 되어 있어서, Github처럼 예쁘게 포매팅된 문서를 보실 수 있을 겁니다. ^^

#1.안녕하세요 H1 입니다.
## 1.1 H2에요

이것은 일반 텍스트입니다. 마크다운으로 아주 편하게 문서를 작성할 수 있어요. ;)

* 리스트1
* 리스트2
* 리스트3

이제 코드를 한번 보겠습니다.

    이 부분은 코드로 표시될 부분입니다. 탭을 1번 입력하거나 스페이스바를 4번 입력하면 코드 블럭을 사용할 수 있습니다. 

> 이것은 인용 블럭입니다. 정말 쉽죠? ^^;;;

[kkamagui blog](http://kkamagui.tistory.com)는 링크를 거는 간단한 방법입니다. 이것 외에도 많은 방법이 있어요 ;) 더 많은 내용은 [마크다운 문법](http://blog-kkamagui.cloudfoundry.com/posts/1)을 참고하세요.

결과:

---

1.안녕하세요 H1 입니다.

1.1 H2에요

이것은 일반 텍스트입니다. 마크다운으로 아주 편하게 문서를 작성할 수 있어요. ;)

• 리스트1
• 리스트2
• 리스트3

이제 코드를 한번 보겠습니다.

이 부분은 코드로 표시될 부분입니다. 탭을 1번 입력하거나 스페이스바를 4번 입력하면 코드 블럭을 사용할 수 있습니다. 

이것은 인용 블럭입니다. 정말 쉽죠? ^^;;;

kkamagui blog는 링크를 거는 간단한 방법입니다. 이것 외에도 많은 방법이 있어요 ;) 더 많은 내용은 마크다운 문법을 참고하세요.

---

CSS 바꾸는 방법

Github Style도 충분히 만족스럽지만 각자의 취향 차이가 있으니 자신이 원하는 CSS로 바꾸는 방법도 살짝 알아보겠습니다. 홈 디렉터리에 있는 .vim/plugin 폴더 아래의 preview 관련 폴더로 이동해보면 아래와 같은 파일이 보일 겁니다.

kkamagui@ubuntu:~/.vim/plugin/vim-markdown-preview/stylesheets$ ls
github.css  safari-reader.css  simple-print.css

여기서 github.css를 자신의 입맛대로 바꾸거나, 아니면 여기에 css 파일을 복사하고, plugin 폴더 아래에 있는 vmp.vim 파일을 수정해도 됩니다. 파일을 열어서 23번 라인 근처를 보시면 stylesheet를 지정하는 부분이 보이는데요, 요 부분을 수정해줍니다. 저는 application.css 파일을 사용하고 있어서 요걸 지정해줬습니다.

 22 if !exists('g:VMPstylesheet')
 23     let g:VMPstylesheet = 'application.css'
 24 endif

자, 다 변경했으면 이제 다시 Command Line에서 :Mm을 입력해보겠습니다. 그러면, 새로운 페이지가 열리면서 지정한 CSS가 적용된 화면을 볼 수 있을 겁니다. ^^;;;

마크다운 덕에 재미있는 일을 많이 해보는군요. ;) 텍스트로 만들어진 문서를 작성하는 데는 마크다운도 괜찮은 선택인 것 같습니다. 그림이 들어가야 한다면... 그림을 어디 올려서 링크를 걸어야 하는 점이 약간 불편하긴 한데요, 그래도 링크만 있다면 그림을 넣는 건 편리하기 때문에 어떻게든 될 것 같네요.