目次
- 目次
- はじめに
- Markdown用Vim設定ファイル:markdown.vim
- VimからMarkdownプレビューをするプラグイン: previm
- mermaidを使ってmarkdownで図を書く
- Markdownのチートシートを表示する
- Markdownが使えるツール
- 参考資料
- MyEnigma Supporters
はじめに
最近、ちょっとしたメモや
ブログ記事(はてなブログではMarkdownで記事を書けます)
Github上のプロジェクトのREADMEなど、
Markdownを書くことが多くなってきたので、
VimでのMarkdownの環境を整えました。
それらの紹介をしたいと思います。
Markdown用Vim設定ファイル:markdown.vim
自分はftpluginの機能を使って
markdownファイルを開いた時のみ設定が有効になるように、
markdown用設定をmarkdown.vimというファイルにまとめています。
(pluginは.vimrcでインストールするようになっています。)
下記のGithub上にアップされていますので参考にどうぞ
VimからMarkdownプレビューをするプラグイン: previm
previmというプラグインを使うと、
ブラウザを使ってMarkdownのプレビューを表示することができます。
NeoBundle 'kannokanno/previm'
このプラグインをインストールしたあと、
:PrevimOpen
と関数を呼ぶと、下記のようにブラウザが立ち上がり、
Markdownのプレビューが表示されます。
その他のプラグインに依存しないので、
このプラグインのみを入れれば、
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;
フローチャート2
左から右へのフローチャートを書く場合は、
graph LR(Left to Right)と書きます。
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
すると下記のような図が得られます。
ノードの形状の表し方
| ノードの形状 | 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で呼び出せるようにしています。
自作のhelpファイルを作成する方法は下記を参照下さい。
一つ注意点として、
txtファイルの一行目に
アスタリスク(*)で囲まれたヘルプファイルの名前が書いてないと、
:helpで認識されないので注意して下さい。
また、markdownファイルを開いている時にF6で
このヘルプファイルを見れるようにしています。
" <F6>でMarkdownチートシートを表示 nmap <F6> :h my-markdown-cheat-sheet.md<CR>
先ほどのmermaidのチートも書いておくと便利です。
Markdownが使えるツール
実はMarkdownは最近かなり一般的なフォーマットになっており、
Vim以外でもいろんなところで使うことができます。
ただ、一つ注意点として、
各アプリによって利用できるマークダウンの記法が違ったり、
同じ目的のための記法が微妙に違ったりするので、注意が必要です。
GitHub
基本的にGitHubのコメント欄などではMarkdownが使えます。
Teams
MicrosoftのTeamsもチャット欄などでMarkdownが使えます。
ただし表の表示や、画像の埋め込みなどはできないようなので(画像のコピペはできますが)、少し注意が必要です。
はてなブログ
はてなブログはブログを書くのにマークダウンを使うことができます。
この記事もマークダウンで書いています。
参考資料
MyEnigma Supporters
もしこの記事が参考になり、
ブログをサポートしたいと思われた方は、
こちらからよろしくお願いします。
