Markdownでnoteやinfoを使えない理由と対処法
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補足などのメッセージ:::
:::tiptipのメッセージ:::
:::caution警告のメッセージ:::
:::dangerより強い警告のメッセージ:::まとめ
Markdownで「note」や「info」を使えない理由と対処法について紹介しました。主要なWebサイトやMarkdownパーサーなどでは、Note記法やそれに似た記法を使えるようになっています。
Note記法を使うと情報を整理しやすくなるため、ぜひ活用してみてください。
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。





![[何を報告していますか?]というタイトルのダイアログで[スパム]にチェックが入っているスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fx-report-post-spam-selected.png&w=1920&q=75)

![Xの設定の[アクセシビリティ、表示、言語]>[表示]>[フォントサイズ]のスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fx-android-font-size-settings.png&w=3840&q=75)
![Xの設定画面のスクリーンショット。[アクセシビリティ、表示、言語]>[データ利用の設定]の中のようすが示されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fx-data-saver-high-resolusion-image-settings.png&w=3840&q=75)



