Help us understand the problem. What is going on with this article?

VimでMarkdown, ブラウザでプレビュー

More than 5 years have passed since last update.

Qiitaを使い始めてからというもの、Markdown記法って便利だなあ、と感じるようになりました。

折角なので普段のメモなどもMarkdownで記述しよう、ってなわけでVimにMarkdownのシンタックスハイライトを導入し、ついでに編集内容をブラウザでプレビューできるように環境構築してみました。

ちなみにこの記事も今までのKobitoでなくVimで編集しました。

参考にさせていただいたサイト

Vim-Markdown、QuickRunの導入

すっかりお世話になりっぱなしのNeoBundleを利用して導入します。
後程説明しますが、ブラウザでプレビューするためにopen-browserというプラグインも導入しておきます。

NeoBundle 'tpope/vim-markdown'
NeoBundle 'tyru/open-browser.vim'
NeoBundle 'thinca/vim-quickrun'

Vimを起動して:NeoBundleInstallで完了です。

Markdownパーサのインストール

Markdown記法をHTMLに変換するパーサをインストールします。
参考サイト様によると、quickrun0.5.0では以下のMarkdownパーサをサポートしているようです。
$PATHにこれらのコマンドがあると、それを使って変換が行われます。

優先順位はこのリストの上から順番です。

  • Markdown.pl
  • kramdown
  • bluecloth
  • redcarpet
  • pandoc

今回はRubyでも使えるkramdownにしてみました。

$ sudo gem install kramdowm

なお、会社などで一時的にProxyを使いたい場合は-p http://your.proxy:8080などのオプションを付ければOKです。

ブラウザプレビュー設定

再度.vimrcを編集します。

" -------------------- QuickRun ----------------------------- "
let g:quickrun_config = {}
let g:quickrun_config['markdown'] = {
      \   'outputter': 'browser'
      \ }

以上で準備完了です。

Hello,Markdown!

それではマークダウンを書いてみます。拡張子.mdとか.mkdとすると勝手にMarkdown形式としてシンタックスハイライトを行ってくれると思います。

$vim hello.md

hello.md
## Hello,Markdown!

おはようございます。

* リスト
* リスト
  - 入れ子もできるYO

編集完了したら編集モードに戻って、\rと入力してみてください(\はバックスラッシュです)。
kramdownを使ったHTML変換が行われ、.htmlに関連付けられたブラウザでプレビュー可能になると思います多分。

うわー便利。

.vimrcも整形しなきゃなあ…

.vimrcもそろそろ超初心者なりに綺麗にしたいです。
こう何から何まで初心者だと覚えることが多すぎて時間が足りず、なかなか本題のRubyのお勉強に入れないですね。でも楽しいです。
4年間もSIで何やってたんでしょ、というツッコミは置いといて。。

us10096698
SI勤務のエンジニア。 イケてる技術を学びたくて自学を開始しました。基本的には日々の作業メモを投稿していきます。 ※ 内容について、間違いや誤解を含む可能性が多分にございますので、その際はご指摘いただければ幸いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away