Markdownでnoteやinfoを使えない理由と対処法

#VS Code#Web開発#解説
投稿日: 更新日:

Markdownは、テキストをマークアップするための軽量な記法です。ブログやドキュメントの作成によく使用されています。Markdownでは、いくつかのキーワードを使用して、テキストのスタイルや構造を指定できます。

一部のサイトでは、Markdownで「note」や「info」などのキーワードで注釈を表現できます。しかし、これらの機能が使えないことがあります。

この記事では、Markdownで「note」や「info」を使用できない理由と代替方法についても紹介します。

Note記法とは

Markdownで「note」や「info」といったキーワードを使って注釈を書く機能は、「Note記法」や「メッセージ」などと呼ばれています。Markdownの仕様ではなく、各サイトで独自に実装されている機能です。そのため、サイトによっては使えないことがあります

主要なWebサイトでは、次のような構文で注釈を書けます。

たとえば、Qiitaでは次のような構文がサポートされています。

1
:::note info
2
補足などのメッセージ
3
:::
4
5
:::note warn
6
警告のメッセージ
7
:::
8
9
:::note alert
10
より強い警告のメッセージ
11
:::

また、Zennでは次のような構文がサポートされています。

1
:::message
2
警告のメッセージ
3
:::
4
5
:::message alert
6
より強い警告のメッセージ
7
:::

GitHubでは、次のような構文がサポートされています。

1
> [!NOTE]
2
> 補足などのメッセージ
3
4
> [!TIP]
5
> tipのメッセージ
6
7
> [!IMPORTANT]
8
> 重要なメッセージ
9
10
> [!WARNING]
11
> 警告のメッセージ
12
13
> [!CAUTION]
14
> より強い警告のメッセージ

VS CodeでNote記法を使う

前述のように、Note記法はMarkdownの仕様ではないため一部のサイトでしか利用できません。しかし、VS Codeでは拡張機能をインストールするとNote記法を使えるようになります

Markdown向けの便利な機能が搭載されている、拡張機能の「Markdown All in One」をインストールすると、VS CodeでもGitHubと同様の記法を使えるようになります。

任意のMarkdownパーサーでNote記法を使う

主要なMarkdownパーサーでは、プラグインを使うことでNote記法を利用できるようになります。

Markedでは、筆者が開発したqnote-parserというプラグインを利用できます。また、remarkではremark-github-beta-blockquote-admonitionsというプラグインを利用できます。

前者はQiitaのNote記法、後者はGitHubのNote記法に対応しています。

ちなみに、このブログではStarlightというドキュメント作成フレームワークのコードの一部を利用しています。Starlightでは、次のような構文でNote記法を使えます。remarkを使っている場合は、Starlightのコードを参考にしてもよいでしょう。あるいは、remark-github-beta-blockquote-admonitionsを使うこともできます。

1
:::note
2
補足などのメッセージ
3
:::
4
5
:::tip
6
tipのメッセージ
7
:::
8
9
:::caution
10
警告のメッセージ
11
:::
12
13
:::danger
14
より強い警告のメッセージ
15
:::

まとめ

Markdownで「note」や「info」を使えない理由と対処法について紹介しました。主要なWebサイトやMarkdownパーサーなどでは、Note記法やそれに似た記法を使えるようになっています。

Note記法を使うと情報を整理しやすくなるため、ぜひ活用してみてください。

Twitterのアイコン LINEのアイコン Threadsのアイコン Misskeyのアイコン Misskeyのアイコン
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。