VS CodeでMarkdownの脚注がうまく表示されないときの解決法|Markdown Footnoteをインストールするだけ!

この記事の内容について、業務や開発でお困りの場合は個別に対応できます。

結論:PreviewやMPEで頑張るより、専用プラグインを使ったほうが早い

VS CodeでMarkdownの脚注(footnote)を書こうとして、

  • 標準Markdown Previewで表示されない
  • Markdown Preview Enhanced(MPE)を入れても挙動が不安定
  • 文末に置いても、見出しを外しても、なぜか消える

──こうした問題にハマる人は多いです。

結論から言うと、
VS CodeでMarkdown脚注を安定して使いたいなら、専用プラグインを使うのが正解です。


よくある失敗パターン

1. VS Code標準Markdown Previewを使う

標準Previewは 脚注構文を正式にはサポートしていません

吾輩は犬である。[^note]

[^note]: 注記

この書き方自体は正しいMarkdownですが、
標準Previewでは脚注として解釈されません。


2. Markdown Preview Enhanced(MPE)で解決しようとする

MPEは高機能ですが、

  • 脚注仕様が明確にドキュメント化されていない
  • 実装・設定・環境依存が強い
  • 「表示されたりされなかったり」する

という問題があります。

脚注だけのためにMPEと格闘するのはコスパが悪い、というのが実感です。


最終解決策:Markdown Footnote 拡張を使う

使用する拡張

Markdown Footnote
(作者:Mai Hou)

VS Code Marketplaceで
Markdown Footnote
と検索すれば見つかります。


使い方(これだけ)

Markdown本文

# Footnotes look like this

## Test

I am a dog. I have a name too.[^natsume]

[^natsume]: This is how a footnote appears!

Preview表示結果

  • 本文中は [1] の上付き脚注
  • 文末に脚注一覧が自動生成
  • 戻りリンク(↩)付き

余計な設定は一切不要です。


なぜこの方法が一番良いのか

1. 書くときは「意味ラベル」

[^natsume]
  • 数字を管理しなくていい
  • 並び替えや追記で壊れない

2. 表示は自動ナンバリング

  • Previewでは論文・技術記事っぽい見た目
  • 読み手にも自然

3. PandocやWord変換とも相性がいい

  • Markdownとして正統な書き方
  • プレビューはVS Code専用、本文は汚れない

まとめ

  • VS Code標準Markdown Preview → 脚注には不向き
  • Markdown Preview Enhanced → 脚注目的では不安定
  • Markdown Footnote拡張 → 安定・簡単・最短ルート

結論:
「頑張って設定する」より
「脚注専用プラグインを使え」

Markdownで脚注を書くなら、これが現時点での最適解です。

ZIDOOKA!

この記事の内容について、対応できます

この記事に関連する技術トラブルや開発上の問題について個別対応を行っています。

個別対応は3,000円〜 内容・工数により事前にお見積りします
最後までお読みいただきありがとうございました

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

AI活用に関するポリシー

当サイトでは、記事の執筆補助にAIを活用する場合がありますが、全面的な委任は行いません。