読者です 読者をやめる 読者になる 読者になる

MyEnigma

とあるエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

Markdown用おすすめvim設定&プラグイン

Vim

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

目次

はじめに

最近、ちょっとしたメモや

ブログ記事(はてなブログではMarkdownで記事を書けます)

Github上のプロジェクトのREADMEなど、

Markdownを書くことが多くなってきたので、

VimでのMarkdownの環境を整えました。

それらの紹介をしたいと思います。

 

Markdown用Vim設定ファイル:markdown.vim

自分はftpluginの機能を使って

markdownファイルを開いた時のみ設定が有効になるように、

markdown用設定をmarkdown.vimというファイルにまとめています。

(pluginは.vimrcでインストールするようになっています。)

 

下記のGithub上にアップされていますので参考にどうぞ

github.com

 

VimからMarkdownプレビューをするプラグイン: previm

github.com

previmというプラグインを使うと、

ブラウザを使ってMarkdownのプレビューを表示することができます。

 

NeoBundle 'kannokanno/previm'

 

このプラグインをインストールしたあと、

:PrevimOpen

と関数を呼ぶと、下記のようにブラウザが立ち上がり、

Markdownのプレビューが表示されます。

f:id:meison_amsl:20151229090830p:plain

   

その他のプラグインに依存しないので、

このプラグインのみを入れれば、

Markdownのプレビューをすることができます。

 

また一秒間隔でプレビューのアップデートがされるため

Markdownファイルをvimで更新すると、

自動でブラウザプレビューも更新される所が良い点です。

 

追加の設定として、

プレビュー表示のブラウザをFirefoxに指定し、

F5を押した時にプレビューが表示されるようにしています。

"ブラウザの設定"
let g:previm_open_cmd = 'open -a Firefox'

" <F5>で編集中のファイルをブラウザで表示
nmap <F5> :PrevimOpen<CR>

 

mermaidを使ってmarkdownで図を書く

先ほど紹介したprevimはmermaidという

markdownによって

フローチャートやガントチャートを書くツールに対応しています。

基本的には下記のようにmermaidタグで囲めばOKです。

```mermaid

code

```

フローチャート1

上から下向きのグラフを書く時は、

下記のようにgraph TD (Top to down)

とヘッダを書いてグラフを書きます

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->E;

f:id:meison_amsl:20151229135329p:plain

 

フローチャート2

左から右へのフローチャートを書く場合は、

graph LR(Left to Right)と書きます。

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

すると下記のような図が得られます。

f:id:meison_amsl:20151229141535p:plain

ノードの形状の表し方

ノードの形状 mermaid
四角 node[hoge]
角丸四角 node(hoge)
node( (hoge) )
片方リポン node>hoge]
菱型 node{hoge}

 

リンクの形状の表し方

リンクの形状 mermaid
A --- B
矢印線 A --> B
テキスト付き線 A-- This is the text --- B
テキスト付き矢印線 A-- text -->B
点線 A-.->B
テキスト付き点線 A-. text .->B
太線 A==>B
テキスト付き太線 A== text ==>B

Markdownのチートシートを表示する

結構、Markdownの記法を忘れてしまうことが多いので、

自分用のMarkdown cheatsheetをtxtで作成し、

そのファイルをhelpで呼び出せるようにしています。

github.com

 

自作のhelpファイルを作成する方法は下記を参照下さい。

一つ注意点として、

txtファイルの一行目に

アスタリスク(*)で囲まれたヘルプファイルの名前が書いてないと、

:helpで認識されないので注意して下さい。

 

また、markdownファイルを開いている時にF6で

このヘルプファイルを見れるようにしています。

" <F6>でMarkdownチートシートを表示
nmap <F6> :h my-markdown-cheat-sheet.md<CR>

先ほどのmermaidのチートも書いておくと便利です。

参考資料

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

myenigma.hatenablog.com

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)

はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)