ページ内リンクってなに?
ページ内リンクは、見出しなどに飛べるリンクのことです。
目次を作ったり、文章中から特定のセクションへ移動する際に便利です。
書き方サンプル
[リンク元](#リンク先)
### リンク先
ここがリンク先の見出しです。
上記をプレビューすると、下記のように表示されます。
リンク先
ここがリンク先の見出しです。
リンク元をクリックすると、
リンク先の位置までスクロールします。
ページ内リンクされない問題とその原因
-
間違った書き方
[LINK元](#LINK先1) ### LINK先1
-
正しい書き方
[LINK元](#link先2) ### LINK先2
- 正しい書き方プレビュー
LINK元2LINK先2
原因
「間違った書き方」の(### LINK先1)に含まれている「LINK」はすべて大文字ですが、
プレビュー時には、そのままidになるのではなく、
一定のルール(小文字化など)で変換されます。
### LINK先1 -> <h3 id="link先1">LINK先1</h3>
そして、
LINK先1 ≠ link先1
といった不一致が起きて、リンクが機能しなくなります。
GFMとは?
GitHub が拡張した Markdown 仕様(GitHub Flavored Markdown)の略称です。多くのプラットフォームで採用されており、見出しから自動的に id が生成される特徴があります。
※補足
GitHubのMarkdownレンダリングに近い挙動を前提に解説しています。
GFM仕様そのものが見出しID生成ルールを
厳密に定義しているわけではなく、環境ごとに実装差があります。
たとえば、
GitHubはGFMに準拠していますが、QiitaやVSCodeなどは
完全準拠ではなく、似た挙動をする独自実装です