VimによるMarkdown編集環境

MarkdownはいわゆるLightweight markup langage(軽量マークアップ言語)の一つです.

lightweight markup langage には,色々と種類があります.
http://en.wikipedia.org/wiki/Lightweight_markup_language

これまで,GitHubを利用している時ぐらいしか使っていませんでしたが,最近では色々な場面で,なんちゃら.md という名のファイル名に出くわします.ここはもう少し突っ込んで記述法を確認してみるかと思った次第です.

記述は簡単なのですが,さてどうやってプレビューするか.HTMLに変換してブラウザで,が一般的なのでしょうが,色々と面倒だな...と.

そういうことで調べてみるとありました,「previm」です.

kannokanno/previm | GitHub
https://github.com/kannokanno/previm

Vimのプラグインらしいです.まあVimをよく利用しますし,保存の度にブラウザの内容が更新されるということで,動きも軽そうなのでこれに決めました.

実は今ままで恥ずかしながらプラグインを利用したことがなかったのですね.そうピュアVimな人だったのです.

ということで,まずは,プラグイン管理を行うNeoBundleをインストールしてみます.

すべてはここに記載されています.
Shougo/neobundle.vim | GitHub
https://github.com/Shougo/neobundle.vim

指定通り,.vimrcに追記して,Vimを起動すると,インストールするかと聞いてきますので,yとすれば勝手にインストールされます.
既に,デフォルトでプラグインがごろごろとインストールされていきます.
そこに,flazz/vim-colorschemasというのがあって,その中に私が普段Emacsで利用しているカラースキーマのSolarizedがありましたので,これを適用しました..vimrcに次の様に追記します.

"Solarized
set background=light
let g:solarized_termcolors=256
colorscheme solarized

NeoBundleの記述の後に記載しないと,Solarized?そんなスキーマは無いよと怒られます.それとMacのターミナルで動かす場合は,デフォルトだとシアンとかマゼンダとか16色レベルでギラギラとした色になって,逆に目が疲れてしまうということになってしまいますので,colorschemaの記述の前に「let g:solarized_termcolors=256」を追記しておきましょう.

markdown-env01

 

さて,いよいよPreVimの出番です.

PreVimについては,次を参照してもらえればOK.

kannokanno/previm | GitHub
https://github.com/kannokanno/previm

ほんと,GitHubはありがたい.

ということで,「.vimrc」に次の3つを記述.

NeoBundle 'kannokanno/previm'
NeoBundle 'plasticboy/vim-markdown'
NeoBundle 'tyru/open-browser.vim'

vim-markdownは,VimのMarkdowmモードで,キーワードハイライトや色々と補完やらしてくれるみたい.open-browserは,これを入れておくと,VimからデフォルトのWebブラウザが開けちゃうみたい.

Vimを再起動すると,上記3つのプラグインをインストールするのかと聞いてきます.

使い方にも記述されている通り,「.vimrc」にこれを追記しておきます.

"PreVim
augroup PrevimSettings
    autocmd!
    autocmd BufNewFile,BufRead *.{md,mdwn,mkd,mkdn,mark*} set filetype=markdown
augroup END

そうしないと,拡張子「.md」をMarkdownと認識してくれないみたい.

Markdownのファイルを編集して,Vimのコマンドモードで「:PrevimOpen」やると,次のようにブラウザが開いて,きちんと整形してくれます.嬉しいことに,「:w」するたびに自動で表示も更新されます.

markdown-env02

なぜか画像が表示されないんですけど...

とりあえず,今回はこの辺で...

 

広告
Posted in Mac

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中