WindowsでのMarkdownエディタはVS Codeに落ち着いた

Windowsで使えるMarkdownエディタを探していたのですが、Visual Stdio Code(以下VS Code)に落ち着きました。

以前はAtomを利用していたのですが、日本語入力時になぜか推測候補の表示がガタガタするのと、動作が重かったので代わりを探していたところ、Atomと競合する形のVS Codeを利用してみることに。

これがシンプルで大した設定をすることもなく利用できたので気に入りました。特に不都合もなく利用できるので今はVS Codeを利用しています。

VS Codeをインストール、簡単な設定

[linkcard url=”https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
“]
上記公式ページからダウンロードしてきます。
設定はファイル > 基本設定 > 設定あるいはCTRL ,で開きます。MacだとCTRLではなくになります。以降の記事中もほぼ共通でそうなります。
設定の画面は左側が既定(デフォルト)の設定で、自分の設定は右側に記述していきます
私の設定は以下のような感じです。

{
    "editor.fontSize": 17,
    "[markdown]": {
        "editor.wordWrap": "bounded",
        "editor.quickSuggestions": false,
        "editor.selectionHighlight": false,
        "editor.renderLineHighlight": "line"
    },
    "markdown.preview.fontSize": 17,
    "markdown.styles": ["ここにcssのパス"] //ディレクトリの区切りは\ではなく\\と入力すること
    //最後の行以外は全て,を追加すること
}

とりあえずこれをコピペしてください。青くなっている部分にマウスカーソルを重ねると説明文がでます。


"[markdown]"{ ~ }と記述すればそのスコープはMarkdownに絞った設定になります。
cssなんて必要ないぜって人はcssの行を削ってください。

拡張機能を入れる

VS CodeはAtomと同様にユーザーが作成した拡張機能をインストールできます。
左側に並んでいるアイコンのうち、一番下のものをクリックしてください。あるいは表示 > 拡張機能でもよいでしょう。
検索で次のものを検索し、インストールします。要らないと思ったら入れなくてもいいです。

名前 効果
Markdown All in One 鉄板。これさえ入れておけばMarkdownは大体なんとかなる
Markdown Shortcuts Markdownのショートカットを追加する。All in Oneはなぜかキーショートカットに関しては弱い
Japanese Word Handler 日本語入力時にCTRL(MacはOption)を押しながら左右にカーソルを動かすとひらがな/カタカナ/漢字の境界にカーソルが移動する

Markdownを編集する

CTRLを押しながら
B 強い強調
I 強調
L ハイパーリンク
Shift L 画像を表示
Shift [ or ] ヘッダーの上げ下げ

あとは右クリックからテーブルを追加したりなんなりできます。詳しい説明は各拡張機能の説明を見てください。
また、右クリックでは出ない機能もあります。その場合はCTRL Shift P を押してコマンドパレットでコマンドを検索して実行するとよいでしょう。


その他はmarkdown create tableなどでTOCの作成ができます。

もっと設定を頑張る

目次についての設定

一番大きいヘッダーでも<H2>なんだけど……という人はユーザー設定に次の一文を加えてください。

"markdown.extension.toc.levels": "2..6",

また、以下の一文を加えるとTableが番号付きリストになります。

"markdown.extension.toc.orderedList": true,

ショートカットの設定

現状だと以下の問題があります。

  1. Markdown All in OneとMarkdown Shortcutのショートカットキーが被っている
  2. Markdown Shortcutの<h1><h6>タグのショートカットが生きていない
  3. 横にプレビューを表示するショートカットキーが全角入力中は機能しない。あと純粋に押しづらい

以上を解決するためにファイル > 基本設定 > キーボード ショートカットでキーボードショートカットの設定を開きます。
そこでmarkdownと検索するとずらずらっと並びますが、toggleとついているのがmarkdown shortcutのショートカットです。
右クリックでキーバインドの追加・変更・削除が可能です。


そして以下が私のキーバインドです。困ったらkeybinding.jsonに貼り付けてください。
CTRL 1~6に各ヘッダーを割り当て、サイドプレビューはCTRL ALT Vに割り当てました。

    {
        "key": "ctrl 1",
        "command": "md-shortcut.toggleTitleH1"
    },
    {
        "key": "ctrl 2",
        "command": "md-shortcut.toggleTitleH2"
    },
    {
        "key": "ctrl 3",
        "command": "md-shortcut.toggleTitleH3"
    },
    {
        "key": "ctrl 4",
        "command": "md-shortcut.toggleTitleH4"
    },
    {
        "key": "ctrl 5",
        "command": "md-shortcut.toggleTitleH5"
    },
    {
        "key": "ctrl 6",
        "command": "md-shortcut.toggleTitleH6"
    },
    {
        "key": "ctrl alt v",
        "command": "markdown.showPreviewToSide",
        "when": "editorLangId == 'markdown'"
    },
    {
        "key": "ctrl k v",
        "command": "-markdown.showPreviewToSide",
        "when": "editorLangId == 'markdown'"
    },
    {
        "key": "ctrl b",
        "command": "-md-shortcut.toggleBold",
        "when": "editorTextFocus && editorLangId == 'markdown'"
    },
    {
        "key": "ctrl i",
        "command": "-md-shortcut.toggleItalic",
        "when": "editorTextFocus && editorLangId == 'markdown'"
    }

おまけ:Markdownで画像を表示できない

画像が置いてある場所がhttpsではなくhttpだとセキュリティ設定で弾かれるようです。
Shift CTRL Pでコマンドパレットを出し、Markdown changeと検索してください。


そこで上から2番目の「セキュリティで保護されていないコンテンツを許可する」に設定を変更します。



以上です。ここまでくるのに紆余曲折ありましたが、快適に書けて満足です。