제가 Tistory 로 블로그를 시작했지만 Hugo 로 넘어오게된 이유가 몇 가지 있는데 그 중 가장 큰 비중을 차지하는 두가지가 하나는 Tistory 가 Markdown 을 제대로 지원하지 않고, 코드블럭 처리를 고려하면 글을 Tistory 전용 에디터에서 쓰는 것이 반 강제되는 것이었는데요. Tistory 에디터로 글을 쓰다보면 텍스트에 기본적인 강조 처리하는 것들도 전부 마우스로 처리해야하는데 매번 키보드에서 손이 움직이는게 여간 성가신 것이 아니었거든요. 그래서 포스트를 작성하는 와중에 이 모든걸 Terminal 에서 처리할 수 있으면 어떨까 하는 생각을 종종하게 되었고 결국 Hugo 로 블로그를 관리하는 것으로 결정했습니다.
그런데 막상 이전을 하고 포스트를 작성하다보니 또다른 문제를 직면하게 되었는데 Termnial 에서 글을 작성할 때 에디터로 사용했던 Vim 은 Markdown Highlighting 을 지원하지 않아 글이 조금만 길어져도 가독성이 많이 떨어졌습니다. 블로그를 운영하면서 동시에 Vim 사용까지 익숙해지고자하는 욕심이 있었는데 Markdown Highlighting 미지원과 실시간으로 결과물을 확인할 수 있는 Preview 기능이 없다는 단점을 극복하지 못하고 결국 최근 포스트들은 전부 VSCode 로 작성하는 상태가 되어버렸죠 ㅎㅎ
물론 VSCode 정도면 정말 좋은 에디터라 불만은 없었지만 그래도 Terminal 에서 Vim 으로 글을 쓰는게 더 개발자스럽고 간지나잖아요? ㅋㅋㅋㅋ 그래서 오늘은 Vim 에 Plugin 을 설치해서 Markdown Highlighting 과 Preview 를 실시간으로 확인할 수 있도록 공부해보겠습니다.
Vundle 설치하기
Vim 에 Plugin 을 설치하기 위해서는 Plugin 을 쉽게 설치할 수 있도록 도와주는 Vundle 이라는 Tool 이 있습니다. Vundle Github Page 에 접속해 가이드대로 차근차근 설치를 진행해볼게요.
Installation 쪽을 확인해보면 아래 커맨드로 Repository 를 Clone 하라고 되어있네요. 시키는대로 합니다 ㅎㅎ
git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
이 다음으로는 .vimrc 파일에 설정 정보를 복사해서 넣어주어야 하는데요. 이 파일은 Vim 의 설정을 관리하는 파일이라고 생각하면 됩니다. 보통 이 파일이 macOS 기준으로 Home 디렉토리에 있어야한다고 하는데 왜인지 저는 없었습니다. 그래서 그냥 새롭게 만들어주기로 했어요. 설마 꼬이는건 아니겠지??
이렇게 새로운 파일을 생성하고 다음 설정값을 복사해 입력합니다.
set nocompatible " be iMproved, required
filetype off " required
" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')
" let Vundle manage Vundle, required
Plugin 'VundleVim/Vundle.vim'
" The following are examples of different formats supported.
" Keep Plugin commands between vundle#begin/end.
" plugin on GitHub repo
Plugin 'tpope/vim-fugitive'
" plugin from http://vim-scripts.org/vim/scripts.html
" Plugin 'L9'
" Git plugin not hosted on GitHub
" git repos on your local machine (i.e. when working on your own plugin)
Plugin 'file:///home/gmarik/path/to/plugin'
" The sparkup vim script is in a subdirectory of this repo called vim.
" Pass the path to set the runtimepath properly.
Plugin 'rstacruz/sparkup', {'rtp': 'vim/'}
" Install L9 and avoid a Naming conflict if you've already installed a
" different version somewhere else.
" Plugin 'ascenator/L9', {'name': 'newL9'}
" All of your Plugins must be added before the following line
call vundle#end() " required
filetype plugin indent on " required
" To ignore plugin indent changes, instead use:
"filetype plugin on
"
" Brief help
" :PluginList - lists configured plugins
" :PluginInstall - installs plugins; append `!` to update or just :PluginUpdate
" :PluginSearch foo - searches for foo; append `!` to refresh local cache
" :PluginClean - confirms removal of unused plugins; append `!` to auto-approve removal
"
" see :h vundle for more details or wiki for FAQ
" Put your non-Plugin stuff after this line
꼭 저장하고 Vim 을 종료하세요. 그리고 터미널에서 Vim 을 실행합니다.
그럼 이제 아래와 같은 화면이 뜰텐데 : 으로 명령모드에 진입하고 PluginInstall 을 입력합니다. Terminal 에서 바로 설치하는 방법으로는 vim +PluginInstall +qall 이렇게 커맨드를 입력하면 된다고 합니다.
설치 진행 중에는 아래와 같은 화면을 볼 수 있을텐데 설치과정에 시간이 조금 필요하니 잠시 기다려야 하더라고요. 저는 뭔지 모르겠는데 에러가 하나 발생했어요 ㅠㅠ 별거 아니길 바라고 일단 계속 진행해 볼게요.
Update: Error 메세지에 대해 확인해보니 이 Plugin 은 설치할 필요가 없는 것이라고 하네요. 위 코드블럭에서는 해당 내용을 삭제해두었습니다.
Plugin 설치하기
Vundle 설치를 마쳤으니 이제 본격적으로 Plugin 설치를 시작해볼게요.
Vim Markdown
먼저 Plastic Boy 의 Vim Markdown 을 설치하겠습니다. Markdown Highlighting Plugin 중에서는 이게 가장 유명한 것 같아요.
.vimrc 파일을 열어 아래 코드를 입력하세요.
Plugin 'godlygeek/tabular'
Plugin 'plasticboy/vim-markdown'
저는 이렇게 입력했습니다. " 를 앞에 붙이면 코멘트 처리되는 것 같아요.
그리고 조금 전과 같이 Vim 을 실행하고 커맨드 모드에서 PluginInstall 을 실행했습니다.
설치가 끝난 것 같으니 바로 Markdown 파일을 하나 열어볼게요. 두근두근!! 오호~ 진짜로 못보던 효과가 생겼어요. 제목을 기준으로 글을 접고 라인 수를 표시해주는 것 같네요.
어떻게 펼치는지를 몰라 다시 README 를 읽어보았더니 Folding 을 하나씩 펼치려면 zr, 한번에 전부 펼치려면 zR 커맨드를 사용하라고 하네요. 바로 펼쳐보았습니다.
엥.. 아무것도 변한게 없어요. 접어주기만하고 왜 색은 안변한건지… 역시 쉽게 넘어가주지 않네요 ㅠ
README 파일을 계속 읽어보니 Syntax Extension 은 기본적으로 비활성화되어 있다고 합니다. 아무래도 이게 HighLighting 을 도와주는 기능같은데 비활성화라니… 그럼 이걸 설치한 의미가 없잖아… 바로 활성화 시켜봐야겠어요.
일단 .vimrc 에서 Plugin 에 대한 세부설정을 건드릴 수가 있다고 하네요. 다시 파일을 열어 Folding 비활성화, YAML, TOML, JSON Syntax 를 활성화 시켜보겠습니다. YAML 과 TOML 은 Hugo 에서 사용하는 Front Matter 에 관련된 설정이므로 Hugo 블로그를 사용하지 않는 분들은 빼고 설정해도 됩니다.
" Vim SYNTAX EXTENSIONS
" Disable Folding
let g:vim_markdown_folding_disabled = 1
" YAML Front Matter
let g:vim_markdown_frontmatter = 1
" TOML Front Matter
let g:vim_markdown_toml_frontmatter = 1
" JSON Front Matter
let g:vim_markdown_json_frontmatter = 1
파일의 맨 아래쪽에 코드를 입력하고 저장한 뒤에 다시 MD 파일을 열어볼게요. Folding 설정은 적용이 잘 되서 더 이상 글이 접힌채로 시작하는 것이 아니라 설치하기 전처럼 한번에 다 보이는 형태로 나왔는데 그 외에는 어떤 색상도 적용되지가 않았어요. 이번엔 또 뭐가 문제지…
일단 TOML 및 JSON 은 단순히 활성화만 시킨다고 Syntax 색상이 적용되는 것이 아니라 추가적인 Plugin 이 또 필요하다고 합니다. 그럼 얘네들을 또 설치해볼까요. 뭐가 이렇게 많이 필요한거야!!
TOML PlugIn 설치
TOML Syntax 는 vim-toml 을 설치하면 된다고 합니다. README 에서 시키는대로 해봅니다. 먼저 폴더를 하나 만들어주고 Git Clone 을 할게요.
mkdir -p ~/.vim/pack/plugins/start
cd ~/.vim/pack/plugins/start
git clone https://github.com/cespare/vim-toml.git
그리고 .vimrc 파일에 Plugin 'cespare/vim-toml' 을 입력하고 :PluginInstall 까지 해줍니다. 이제 익숙해져버렸어..
Plugin 'cespare/vim-toml'
근데 하고보니까 굳이 Clone 은 할 필요가 없었던 것 같아요. Vundle 이 알아서 설치해주는 것 같은데…
JSON PlugIn 설치
JSON Syntax 는 Better JSON for VIM의 README 를 참고해 아래 코드를 .vimrc 에 입력했어요.
Plugin 'elzr/vim-json'
이렇게하고 다시 MD 파일을 열어보았으나… 아직도 아무 색상도 보이지 않네요 ㅠㅠ 이제 점점 지쳐갑니다… Vim 에 Markdown Highligting 을 적용하는게 이렇게 힘들줄이야… 그래도 여기까지 왔으니 포기할 수 없어요. 또 뭐가 빠졌길래 이러는건지 찾아볼게요.
휴… 무려 3시간의 삽질 끝에 해결법을 알아냈습니다. 너무 간단한 문제였는데 도대체 답을 찾기가 어려웠어요. 분명히 정상적으로 다 설치한 것 같고 접기 기능도 정상적으로 작동하는데 색상만 표시되지 않던 이유는 Vim 에서 Syntax 설정이 꺼져있어서 그런거였어요. 이 간단한 문제 찾는데 3시간을…~
Vim 에서 : 를 눌러 커맨드 모드로 진입하고 syntax on 을 입력하면 끝입니다. 참고로 Default 값이 off 로 되어있어 매번 파일을 열 때마다 Syntax 를 적용해주기 번거로우니 .vimrc 파일에 syntax on 을 입력해두면 이후부터는 항상 Syntax Highliting 이 적용된 채로 파일이 열리게 됩니다.
색이 이쁘지는 않지만 그래도 정상적으로 하이라이팅 되고 있어요. 해냈습니다!! YAY!!!
Markdown Preview
힘들었지만 성공적하고나니 그래도 보람이 있어요 ㅎㅎ 하지만 우리는 아직 한가지를 더 설치해야합니다. 이번엔 제발 쉽다고해줘 ㅠㅠ 바로 우리가 작성하는 MD 파일의 결과물을 실시간으로 확인할 수 있게 도와주는 Preview Plugin 입니다. 그럼 같이 한번 후딱 설치해볼게요.
이번에 설치할 플러그인은 Markdown Preview 에서 확인할 수 있습니다. 이제 Vundle 사용에 익숙해졌으니 빠르게 진행할게요.
Plugin 'JamshedVesuna/vim-markdown-preview'
.vimrc 에 입력하고 바로 설치까지 진행했습니다. Markdown 파일을 편집할 때 Control + P 를 누르면 Defualt 브라우저로 창이 열리면서 Markdown 이 적용된 결과물을 보여준다고하여 설치를 마치자마자 바로 MD 파일을 열어 실행해보았습니다. 그리고 결과는!!
실패… 이번에도 역시 저에게 시련을 안겨주는군요. 어디 한번 해결해봅시다. 이것 저것 알아보다가 Preview 를 정상적으로 표시하기 위해서는 Markdown 이나 Grip 을 추가로 깔아야한다는 것을 알게되었습니다. 아니 이 정도면 그냥 VSCode 쓰는 것도..ㅋㅋㅋ~
근데 저희는 지금 Markdown 을 사용하는거니까 왠지 이름도 Markdown 인걸 설치하고 싶더라고요. 그래서 Hombrew 를 통해 Markdown 을 설치해보았습니다. 그리고 실행해보니!!
아… 또 문제가 발생했어요. 역시 한번에 쉽게가면 재미가 없죠. 인코딩 문제인 것 같아 설정을 조금 건드려보았으나 번번히 실패하고 결국 Grip 을 깔았습니다. 이것도 Homebrew 에서 설치를 지원하더라고요. 역시 Homebrew 는 짱이에요. 말이 나온 김에 혹시 Homebrew 가 무엇인지 아직 잘 모르는 분들은 Homebrew 설치 및 기본 사용법 익히기 포스팅을 참고해주세요.
brew install grip
하지만 Grip 의 경우에는 .vimrc 에 추가적으로 설정을 하나 더 추가 입력해야합니다.
let vim_markdown_preview_github = 1
여기까지하고 Control + P 를 눌러보니 markdown 이 설치되었을 때와는 다르게 Terminal 아래쪽에 call Vim_Markdown_Preview() 라는 커맨드가 보이며 브라우저가 열리네요.
그리고 결국 성공입니다!!! 정말 오래걸리고 힘들었지만 성공해냈어요 ㅎㅎㅎ 이제 제 블로그 포스팅을 Vim 에서 작업하고 올릴 수 있게되었다구요!! 기나긴 삽질의 시간이었지만 앞으로 잘 활용해서 지금 삽질한 시간 그 이상의 결과물을 뽑아내겠습니다! 그럼 오늘도 끝까지 읽으신 모든 분들 수고 많으셨습니다!!