👈

Visual Studio Code拡張 Markdown All in One

2021/12/01に公開

VS Code

Markdown

idea

1. 概要

Visual Studio Code(以下VS Code)でMarkdownを書くのが便利になるMarkdown All in Oneを入れてみんとす。

機能としては下記のようなことができるようになる。

機能	説明
キーボードショートカット	太字にするとか、見出しレベルを変えるとか、がショートカットでできるようになる
目次作成	ドキュメント内の見出しを検出して、目次を作ってくれる。
見出しナンバリング	見出しのナンバリングもしてくれる。1.1とか1.2とか。
リスト編集補完	箇条書きとか番号付きリスト書いてEnterすると、次の行もその書式になる。あとTabでインデントもできる。
MarkdownをHTMLに変換	なんかできるらしいですハイ。
GitHub風Markdown	ショートカットでテーブルを等幅に整えたりできるよう。あとタスクリスト？もできるって公式説明に書いてあったけど説明がちゃんと書いてなくてわからんかった。
数式	数式入れられるらしいですハイ。
自動補完	なんか画像貼り付ける時だったり数式入れる時だったりリンク入力する時に補完してくるんかなあ。知らんけど。
リンク貼り付け支援	文章を選択してリンクを貼り付けると、Markdown形式に整えて貼り付けてくれる

2. インストール

拡張機能のアイコン→検索欄でmarkdown all in oneと入力→候補に出てきたMarkdown All in Oneのインストール。
はい完了。

3. 使い方

3.1. キーボードショートカット

キー	説明
Ctrl+B	選択した文字の太字にする。もう一回実行したら元に、戻らない
Ctrl+I	文字が斜体に！！！！！
Ctrl+Shift+]	見出しレベルを上げる
Ctrl+Shift+[	見出しレベルを下げる
Ctrl+M	数式入力の文字入れる($$)
Alt+C	チェックリストのオンオフ
Ctrl+Shift+V	プレビューのオンオフ。VS Codeに元々プレビューあるけど…
Ctrl+K → V	エディタの横にプレビュー。元々のプレビューを置き換えてるのね

3.2. 目次関連

目次生成と指定した見出しを目次に入れない方法と目次に表示する見出しレベルの設定と

3.2.1. 目次生成

Ctrl + Shift + P でコマンドパレットを出し、create table of contentsとかで検索する(その一部の文字でもいい)。候補に目次(TOC)の作成が出てきたらそれをクリックすると、目次が挿入される。
ちなみに、この目次を作成した後に見出しを追加した場合でも、mdファイルを保存した時に目次もちゃんと更新される。

3.2.2. 目次アンカーリンクの書式設定

目次を生成すると、その見出しにジャンプできるようにアンカーリンクも設定されるのだが、このアンカーリンクの書式はいろんなサービスによって違う(例えばGitHubとQiitaとかで違ったり)。
この書式が対象のサービスに合ってないと、リンクが正しく機能しなくてジャンプできなくなる(特に、見出しのナンバリングをしてる状態だと顕著)。そのリンクが正しく機能するように、設定で多少変えることができる。
設定画面でslugify modeで検索し、候補に表示されたToc: Slugify Modeで対象のサービスに合ったものを選ぶ。

各モードを試すとこんな感じ(ちなみにvscodeのモードをvscodeで試してみたけどジャンプしなかった…)。

3.2.3. 指定した見出しを目次に入れない1

例えば見出しレベル1で「目次」は置いておきたいんだけど、実際の目次内容の中で「目次」はいらないみたいなケース。
対象の見出しの上にと入力することで、その見出しは目次内容から除外される。

3.2.4. 指定した見出しを目次に入れない2

設定のToc: Omitted From Tocでも指定した見出しを目次に入れないようにできるよう。
詳しくは公式の説明を見てくださいな。

3.2.5. 目次に表示する見出しレベルの設定

見出しレベルいくつまでを目次に表示するかを設定できる。例えば、見出しレベル4以上とかも目次に表示させちゃうと細かすぎちゃう気がする。

このレベルを変更するには、設定画面でtoc levelsとかで検索し、候補に表示されたMarkdown > Extension > Toc: Levelsの値を変更する。

※ちなみに、目次に表示させるレベルをドキュメントごとに設定させたかったりする気がするので、ユーザー設定ではなくてワークスペース設定がいいと思う。

値の指定はx..yで数字を指定する。デフォルトでは1..6なので例えば1..3に変えてみる。

なんということでしょう…ドキュメントには見出しレベル4が存在するのに、目次には見出しレベル4が表示されなくなりました。

3.3. 見出しのナンバリング

Ctrl + Shift + P でコマンドパレットを出し、section numbersとかで検索する(その一部の文字でもいい)。
候補にAdd/Update section numbersが出てきたらそれをクリックすると、ドキュメント内の見出しにナンバリングがされる。
逆にRemove section numbersをクリックするとナンバリングが削除される。

3.4. リスト編集補完

箇条書き・番号付きリストがEnterで次の行にも反映されたり、タブでインデントを変えたりできる。

3.5. MarkdownをHTMLに変換

なんかできるらしいですハイ。自分はこの機能使わないやと思って調べてないです。
詳しくは公式のマニュアル以下略。

3.6. GitHub風Markdown(テーブルの整形)

公式のマニュアルにTable formatterとTask listsって書いてあったけどTask listsが何の機能か書いてなかったので、ひとまずTable formatterについてだけ説明。
Alt + Shift + Fで整形してくれます。

3.7. 数式

数式入れられるらしいですハイ。
公式のマニュアル参照してください。

3.8. 自動補完

公式マニュアル以下略。

3.9. リンク貼り付け支援

文章を選択してリンクを貼り付けると、Markdown形式に整えて貼り付けてくれる。