VSCodeのMarkdownプレビューをカスタマイズ

VSCodeのMarkdown Preview、フォントやフォントサイズを変えるには、ユーザー設定（settings.josn）で「markdown.preview.fontFamily」と「"markdown.preview.fontSize"」を指定する。

    "markdown.preview.fontSize": 16,
    "markdown.preview.fontFamily": " 'メイリオ', DFMaruGothic-Md-WIN-RKSJ-H",

ただし、「markdown-preview-enhanced」をインストールすると、設定が効かなくなる。その場合は、コマンドパレットで「Markdown Preview Enhanced: Customize CSS」を開き、次のように修正する。以下の例では、見出しのサイズやスタイルも変更しています。

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  font-family: "メイリオ";
  //font-family: DFMaruGothic-Md-WIN-RKSJ-H;
  font-size: 15px;
  h1{
    counter-reset: chapter;
    border-style:solid;
    border-width: 0 0 1px 0;
    padding: 0px 0 0px 0px;
    //text-decoration:underline;
    //font-size: 27px;
    font-size: 1.8em
    
  }
  h2{
    counter-reset: sub-chapter;
    border-style:dashed;  
    border-width: 0 0 1px 0;
    padding: 0px 0 0px 0px;
    //text-decoration:underline;
    //font-size: 25px
    font-size: 1.6em
  }
  h3{
    counter-reset: section;
    //border-style:ridge;
    border-style:dotted;
    border-width: 0 0 1px 0;
    padding: 0px 0 0px 0px;
    //text-decoration:underline;
    //font-size: 20px
    font-size: 1.4em
  }
}

図解即戦力 Web技術がこれ1冊でしっかりわかる教科書