VimでMarkdownの環境を整える

2014.03.14.金 Vim

お久しぶりです。2回目の登場、溝畑です。
Markdown記法を覚える意味も込めて、VimにMarkdownの環境を整えてみましたのでご紹介。

Markdownとは、文書を記述するための軽量マークアップ言語のひとつです。
Markdownについては、http://daringfireball.net/projects/markdown/
こちらを参照していただければと思います。

それでは実際に環境を整えていきましょう。
プラグイン管理にNeoBundleを導入していることを前提で進めます。

環境を整えるにあたって、導入するプラグインは以下の3つです。
vim-markdown
previm
open-browser.vim

.vimrcに以下の記述を追加

:wで保存します。
保存後、:source $MYVIMRCで.vimrcを再読み込みし、
:NeoBundleInstallでプラグインを導入します。

さて、このままでは拡張子が.mkdのファイルに対してハイライトが適用されていたので、
.vimrcに以下を追加し、.mdのファイルもfiletypeがmarkdownとなるようにします。


実際にmarkdownファイルを編集してみます。
サンプルとして、このように書いて保存します。
2014-03-14-194642_md_______cache_junkfile_2014_03__-_VIM1

ここでprevimとopen-browser.vimの出番です!
previmは保存したMarkdownをブラウザでプレビューが可能なプラグインです。
previm単体でも問題はないのですが、open-browser.vimを入れておくと、previmの設定なしでブラウザを開くことが可能です。

:PrevimOpenコマンドを打ちます。
すると…。
Preview

ブラウザが立ち上がり、保存したMarkdownファイルのプレビューが表示されます。
ファイルを保存する度に内容は更新されます。

最近、Markdown記法で書けるブログなども増えています。
文章の書き方を統一できるのも大きいですが、HTMLを書かずとも、簡単にスタイリングされた文章を書くことが可能です。
一度触ってみることをオススメします。

Vimの記事というよりも、Markdown色の強い記事となってしまいました。
次回はもう少し、Vimについて書けたらと思います。
Vimの便利さを少しでも伝えていけたらと思っています。

Vim便利です。

VimでMarkdownの環境を整える” への8件のコメント

  1. .vimrcの記述のとこの部分がtypoしてるっぽいですね?

    > pyru/open-browser.vim

  2. コメントありがとうございます。
    ご指摘の通り、typoがありました。
    > pyru/open-browser.vim
    正しくは、tyru/open-browser.vimとなります。

    現在は修正しております。
    ご指摘、ありがとうございました。

  3. 参考にさせていただきました。
    Vimがまた一段と好きになりました。

    ありがとうございます。

  4. こんにちは。
    記述のなかで、シングルクォートで囲むべきところが
    別の記号 ‘ と ’ になってしまっているようですので、ご確認ください。

    .vimrcに以下の記述を追加
    NeoBundle ‘plasticboy/vim-markdown’
    NeoBundle ‘kannokanno/previm’
    NeoBundle ‘tyru/open-browser.vim’


    一部のテキストエディタ(Macのテキストエディットなど)は、
    シングルクォートを自動で別の記号に置き換えてしまうようです。

  5. コメントありがとうございます。

    > Vimがまた一段と好きになりました。

    好みのカスタマイズにして成長させていくと、更に愛着がわくと思います。
    どんどん、「好き」になっていただけると幸いです。

  6. コメントありがとうございます。

    > 記述のなかで、シングルクォートで囲むべきところが
    > 別の記号 ‘ と ’ になってしまっているようですので、ご確認ください。


    上記、確認いたしました。
    ご指摘のとおり別記号となっておりました。

    現在は記事を修正しております。
    ご指摘ありがとうございました。

  7. ピンバック: 分かりやすい!逆引きVimの使い方と基本操作・覚え方まとめ | コムテブログ

  8. ピンバック: Vim+Markdown | Autumnsky

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

mizobata

mizobata の紹介

主にJavaScriptで視覚化がお好きな人。 OpenLayersとかで地図周りと、Highchartsとかでグラフ化など...。 D3.jsなんかも少々。 JSフレームワークはVue.jsから。 最近Angular触ってます。 エディタはもちろん、Vim です。 TypeScriptのときはVSCode。 (VSCode Vim入れてます)