びぼうろぐ

ネ申エクセルからの卒業

トップ > VScode > 【VSCode】Markdownエディタとしてカスタマイズする

【VSCode】Markdownエディタとしてカスタマイズする

VScode Windows

技術文書だったり議事録だったりをMarkdownで書くにあたってVSCodeをカスタマイズしてみました。

環境

プラグインのインストール

コマンドプロンプトを開き、以下のコマンドを実行するとプラグインがインストールできます。

# MarkdownTOC
> code --install-extension alanwalk.markdown-toc
# MarkdownPDF
> code --install-extension yzane.markdown-pdf

VSCodeを起動するとChromiumのインストールが始まります。※MarkdownPDFの動作に必要みたいです。

注意点

MarkdownPDFのGithubより抜粋

もしプロキシを使う必要がある場合、settings.json に http.proxy でプロキシを設定し、Visual Studio Code を再起動してください。

ダウンロードが上手くいかない場合や、Markdown PDF のバージョンアップの度にダウンロードするのを避けたい場合、markdown-pdf.executablePath オプションでインストール済みの Chrome か Chromium を指定してください。

設定

改行コードを明示的に指定

イシューにも挙っている通り、VSCodeがデフォルト設定のままだとMarkdownTOCが正常に動作しないのでワークアラウンドの設定を入れます。

  • [CTRL+Shift+P]を押してコマンドパレットを表示
  • "user setting"と入力
  • "eol"と入力し、設定項目を抽出
  • Files: eolの項目がautoになっていた場合は環境に合った改行コードに変更

出力文書を装飾する

デフォルト設定のままだと味気ない文書が出力されるので、CSS等の設定によって見やすさを向上させます。

  • [CTRL+Shift+P]を押してコマンドパレットを表示
  • "user setting"と入力
  • "markdown pdf"と入力し、設定項目を抽出
  • MarkdownPDFのReadMeを読みつつsetting.jsonをカスタマイズ

settig.jsonの設定例

私の環境では以下のような設定内容になりました。

{
    # MarkdownTOCのワークアラウンド: Windowsの改行コードを明示的に設定
    "files.eol": "\r\n",
    # デフォルトのCSSは使わない
    "markdown-pdf.includeDefaultStyles": false,
    # Github風のCSSを公開されている方がいたのでありがたく流用
    "markdown-pdf.styles": [
        "C:\\Users\\<USERNAME>\\Documents\\github.css"
    ],
    # PDF出力時のヘッダーテンプレ（ファイル名を左上に表示）
    "markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span class='title'></span></div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \"> </div>",
    # PDF出力時のフッターテンプレ（ページ数情報を中央に表示）
    "markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",
}

使い方

目次を生成する

  • VSCodeで.mdファイルを開きます。
  • hタグをいい感じに構成した文書を書きます。
  • 見出しを挿入したい位置で右クリックし、[Markdown TOC: Insert/Update]を実行します。

配布用文書を生成する

  • VSCodeで.mdファイルを開きます。
  • 文書を書き上げます。
  • VSCodeの.mdファイルが開かれているウィンドウ上で右クリックし、[Markdown PDF: Export~]の出力したい形式を選択します。
    .mdファイルと同ディレクトリにファイルが出力されます。

参考ページ