VSCodeのMarkdownプレビューをQiitaに近づけてみる

普段の技術メモをこのQiitaで書いていて
手元のVSCodeでも似た書式にしたいなと思ってたのでメモ

必要だったのは

• 「:::note info」での装飾
• 「#」の章立てを標準より見やすく

といった程度　CSSは10年触ってないので細かいことは考えない

ありがたいことに　こちらとほぼ同じ変更でできた　https://trap.jp/post/1791/
前回検索時にはなかったサイトの様子

拡張機能

定番の

• Markdown All in One
• Markdown Preview Enhanced
• Paste Image

を入れる。　装飾はMarkdown Preview Enhancedで

Markdown Preview Enhanced: Extend Parseの変更

まずF1キーを押して「Markdown Preview Enhanced: Extend Parser」を選択。
開いた parser.jsを変更

parser.js

({
  onWillParseMarkdown: async function(markdown) {

    markdown = markdown.replace(/:::note\swarn[\s\S]*?:::/gm, (note_warn) => {
      note_warn =
        '<div class="alert note-warn">\n' + note_warn.slice(12);
        note_warn = note_warn.slice(0, -3) + "</div>";
      return note_warn;
    });
    markdown = markdown.replace(/:::note\salert[\s\S]*?:::/gm, (note_alert) => {
      note_alert =
        '<div class="alert note-alert">\n' + note_alert.slice(32);
        note_alert = note_alert.slice(0, -3) + "</div>";
      return note_alert;
    });
    markdown = markdown.replace(/:::[\s\S]*?:::/gm, (note_info) => {
      note_info = 
      '<div class="alert alert-info">\n' + note_info.slice(3);
      note_info = note_info.slice(0, -3) + "</div>";
      return note_info;
    });

    return markdown;
  },

  onDidParseMarkdown: async function(html) {
    return html;
  },
})

Markdown Preview Enhanced: Customize CSS の変更

F1キーを押して「Markdown Preview Enhanced: Customize CSS」を選択

style.css

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  .alert-info  {
    color: #000000;
    background-color: #f0fae9;;
    border-color: #97a18f;
  }
  .note-warn {
    color: #000000;
    background-color: #fcf8e3;
    border-color: #faebcc;
  }
  .note-alert {
    color: #000000;
    background-color: #f2dede;
    border-color: #ebccd1;
  }


  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;

  strong {
    color: inherit;
  }
  h1 {
    color: inherit;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eee;
    font-size: 2em;
    font-weight: 600;
  }
  h2 {
    color: inherit;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eee;
    font-size: 1.5em;
  }
  h3 {
    color: inherit;
    font-size: 1.25em;
  }
  h4 {
    color: inherit;
    font-size: 1em;
  }
  code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  }

}

あとは保存してプレビュー実行するだけ

追記メモ

pdf出力時の改ページしたい部分に
<div style="page-break-before:always"></div>
と入力