チャチャチャおもちゃの抹茶っちゃ

ゲームのこととかプログラミングのこととか。気が向いたら書く。ブログタイトルは友人が考えました。

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

目次

MarkdownVisual Studio Code

自分はちょっとしたメモ書きや資料作成にMarkdown記法を利用している。簡単にかけてビジュアルも整うからだ。このとき、Markdownエディタとしてプレビュー機能がついていてかつ軽量なVisual Studio Codeを使用している。

導入している拡張機能

  1. Markdonw-PDF
  2. Markdown Preview Enhanved
  3. Markdown TOC

1と2では実は機能が重複していたりするが普段は1を使っている。理由は後述。

Markdown-PDF

Markdownで書いたものをPDFやHTML、JPEGファイルなどに変換できるというもの。これのいいところは、設定に寄って保存する度にHTMLファイルなども保存変換しなおしてくれるところ。いちいち自分で変換の手を踏まなくて良いのは良い。更に複数形式同時変換もできる。設定は次のような感じ。

"markdonw-pdf.type": [ "html" ],
"markdown-pdf.convertOnSave": true

これで元のMarkdownを保存する度に変換してくれるようになった。自分のつくる資料はだいたいこれでHTMLに変換している。適用されるCSS拡張機能のフォルダ内にある「markdown.css」を書き換えることで変えられる。これも気に入っているところ。

Markdown Preview Enhanced

普段はほとんど上のMarkdown-PDFとデフォルトの機能で足りているのだが、数式などTeX記法を使いたいときは、デフォルトのままでは反映されず、Markdown-PDFも正しく変換を行ってくれない。しかし、このMarkdown Preview Enhancedなら数式もきれいに表示することができる。また、プレビューウィンドウで右クリックすることでHTMLやPDFの各形式への変換にも対応。ただTeXの記法を使うときはオンライン上または拡張機能内のファイル(つまり全くの別ディレクトリ)にアクセスしないといけないHTMLを生成してしまうので、自分以外にデータを渡すには少々不便なところがあり基本的にはPDFに変換することになる。またCSSGithubのものなどいくつかある中から選ぶことになるのでカスタマイズしにくい(GitHubCSS嫌いじゃないけどね)。

Markdown TOC

目次を生成してくれる拡張機能。自分の各記事は大抵長くなりがちなので目次が必須レベル。これを使うと一括で目次を設定してくれるので助かる。

まとめ

VSCodeMarkdownを記述するにあたり使っている拡張機能を紹介した。メモ書きなどにとても便利なので参考にしてほしい。
f:id:mattyan1053:20180802013807p:plain