VSCodeでMarkdownを書くときにMicrosoft Learnで目にするアラートを設定する

# 概要

Microsoft Learnのサイトでは次の画像のように目に付きやすいデザインがあります。

![Microsoft Learnのサンプル画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/3030ff83-329c-199c-12b0-53106b9e77e4.png)

> [Markdown リファレンスについて学習する](https://learn.microsoft.com/ja-jp/contribute/markdown-reference)

これを **VSCodeでMarkdownを書くときにも設定したい！** という記事になります。

# 前提

* VSCodeを使う
* VSCodeの拡張機能 **Markdown Preview Enhanced** をインストールする

:::note warn
Markdown Preview Enhancedのバージョン
現在version：0.7.1でのみこの記事の説明は機能します。
以降のバージョンでの対応方法は確認中です（2024年6月21日更新）。
:::


# 方法

こちらのサイトに書かれている方法を使います。

[Markdown Badges for VSCode markdown-preview-enhanced users](https://dev.to/supportic/markdown-badges-for-vscode-markdown-preview-enhanced-users-3e84?utm_source=pocket_saves)

1. VSCodeで`Ctrl + Shift + P`を押します。
1. 検索バーに`markdown-preview-enhanced.extendParser`を入力します。
1. 開いた`parser.js`を編集します。

特に`parser.js`を編集していない人は、既存のコードを削除して、上記サイトのCodeに書かれているコードをコピーして貼り付けます。

その後、Markdownファイルを作ります。
サンプルとして以下のようなMarkdownを書いてみます。

```Markdown:test.md
# Test

これはテストです。

[!NOTE] メモ

[!TIP] TIP

[!INFO] Info

[!WARNING] 警告

[!CAUTION] 注意
```

これは次のような見た目になります。

![Markdown Preview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/f9998f60-f8f2-c5dd-6655-fb0f9ecba017.png)

# カスタマイズ

ここからはデフォルトの表示をカスタマイズする方法を記載します。

## 見た目の変更

絵文字や色の変更は`parser.js`に書かれている以下部分を編集することで変えられます。


```js:parser.js
const notificationTypes = {
  NOTE: {
    header: 'Note',
    md_icon: ':hand:',
    html_icon: '✋',
    background: '#e2daf1',
    color: '#38225d',
  },
...
```

たとえば以下のように`header`と`icon`を変えてみます。

```js:parser.js
const notificationTypes = {
  NOTE: {
    header: 'NOTE',
    md_icon: ':speech_balloon:',
    html_icon: '💬',
    background: '#e2daf1',
    color: '#38225d',
  },
```

![NOTE Preview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/46d4ace9-d647-4857-240b-eec88458bcf4.png)

このように変わりました。


## headerを日本語にしたい

デフォルトのコードだと`header`を日本語にした場合、表示がちょっと変わってしまいます。

```js:parser.js
const notificationTypes = {
  NOTE: {
    header: 'コメント',
    md_icon: ':speech_balloon:',
    html_icon: '💬',
    background: '#e2daf1',
    color: '#38225d',
  },
```

![Japanese Header Preview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/a8d89793-44d8-b4c1-3825-2c511d5adb4d.png)

暫定的に回避するには以下のようにすると良いです。
※筆者はJavascriptに明るくないため、もっとうまい回避方法があれば教えてほしいです

まず、`notificationTypes`に`header_string`という要素を追加します。
これがheaderに表示する文字列です。

```diff_javascript:parser.js
const notificationTypes = {
  NOTE: {
    header: 'Note',
+   header_string: 'メモ',
    md_icon: ':speech_balloon:',
    html_icon: '💬',
    background: '#e2daf1',
    color: '#38225d',
  },
  TIP: {
    header: 'Tip',
+   header_string: 'Tip',
    md_icon: ':bulb:',
    html_icon: '💡',
    background: '#d2f9d2',
    color: '#094409',
  },
  INFO: {
    header: 'Information',
+   header_string: 'Information',
    md_icon: ':heavy_exclamation_mark:',
    html_icon: '❗',
    background: '#e0f2ff',
    color: '#002b4d',
  },
  WARNING: {
    header: 'Warning',
+   header_string: '警告',
    md_icon: ':warning:',
    html_icon: '⚠',
    background: '#fff1cc',
    color: '#664b00',
  },
  CAUTION: {
    header: 'Caution',
+   header_string: '注意',
    md_icon: ':no_entry_sign:',
    html_icon: '🚫',
    background: '#ffdacc',
    color: '#651b01',
  },
};
```

次に、抜粋した以下の部分を編集します。

```diff_javascript:parser.js
  for (index in badges) {
    html = html.replace(badges[index], (foundElement) => {
      infos = getBadgeInfos(foundElement);
      body = getBody(foundElement);

      if (infos == null)
        return `<div style="color:red">parsing error, see: <pre>~/.mume/parser.js</pre></div>`;

      const styling = `style="padding: 0.8rem 1rem; border-radius: 6px; margin: 1rem 0; background-color:${info.background}"`;

-     return `<div ${styling}><p>${info.html_icon} <strong style="color: ${info.color}">${info.header}</strong></p><p style="margin: 0; text-align: left; line-height:1.3;">${body}</p></div>`;
+     return `<div ${styling}><p>${info.html_icon} <strong style="color: ${info.color}">${info.header_string}</strong></p><p style="margin: 0; text-align: left; line-height:1.3;">${body}</p></div>`;
    });
  }

  return html;
};
```

これで次のように日本語のheaderになります。

![Japanese Header Preview](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302006/aafd559f-b464-74aa-1aac-868039a0c5fe.png)