VS Code における Markdown の独自構文など

はじめに

Markodown は便利である反面、拡張した性にやや乏しい。そこで、Markdown Preview Enhanced を使うことでリアルタイムで拡張可能になる。まず、独自の構文やスタイルの設定について話していく。

1. Markdown Preview Enhanced を VS Code にインストールする。
2. Ctrl + Shift P を押す。
3. Markdown Preview Enhanced: Open Config Script (Workspace) を選択する。

こうするとワークスペースに .crossnote ディレクトリができる。この中の parser.js を書き換えると独自構文を使うことができる。最初の状態では以下のようになっている。（2024/11/12）

parser.js

({
  // Please visit the URL below for more information:
  // https://shd101wyy.github.io/markdown-preview-enhanced/#/extend-parser

  onWillParseMarkdown: async function(markdown) {
    return markdown;
  },

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

例えば、「カクヨム」や「小説家になろう」、「note」などで使われる振り仮名を振る構文を実装してみよう。

parser.js

({
  onWillParseMarkdown: async function(markdown) {
    // ルビの正規表現にマッチさせる
    return markdown.replace(/｜(.*?)《(.*?)》/g, (match, word, ruby) => {
      return `<ruby>${word}<rt>${ruby}</rt></ruby>`;
    });
  },

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

これで、例えば ｜Qiita《キータ》 と書けば Qiitaキータ と出力される。

画像のキャプション

({
  // Please visit the URL below for more information:
  // https://shd101wyy.github.io/markdown-preview-enhanced/#/extend-parser

  onWillParseMarkdown: async function(markdown) {
    return markdown;
  },

  onDidParseMarkdown: async function(html) {
    return  html.replace(/<img src="(.*?)" alt="(.*?)"(.*?)>/g, (match, src, alt, rest) => {
      return `
        <div style="text-align: center;">
          <img src="${src}" alt="${alt}" ${rest}  />
          <div style="font-size: 0.9em;">${alt}</div>
        </div>
      `;
    })
  },
})

これで ![画像](./img.jpg) と書くと画像の下に 画像 と表示される。

PDF

PDF サイズをA4にするには以下のように先頭に書く。

---
puppeteer:
  format: "A4"
---