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

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

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

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

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

Note記法とは

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

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

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

:::note info
補足などのメッセージ
:::
:::note warn
警告のメッセージ
:::
:::note alert
より強い警告のメッセージ
:::

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

:::message
警告のメッセージ
:::
:::message alert
より強い警告のメッセージ
:::

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

> [!NOTE]
> 補足などのメッセージ
> [!TIP]
> tipのメッセージ
> [!IMPORTANT]
> 重要なメッセージ
> [!WARNING]
> 警告のメッセージ
> [!CAUTION]
> より強い警告のメッセージ

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を使うこともできます。

:::note
補足などのメッセージ
:::
:::tip
tipのメッセージ
:::
:::caution
警告のメッセージ
:::
:::danger
より強い警告のメッセージ
:::

まとめ

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

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

Xに共有する Blueskyに共有する Misskeyに共有する LINEに共有する Threadsに共有する
著者のアイコン画像

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

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