Markdownでページ内リンクを作りたいので調査した

Markdownで文章を書いている時、「Markdown形式でどうやってページ内リンクを作るんだろう?」と疑問に思いました。

要望としては2つです

  • 自分がフォーカスしてほしい部分だけを目次として表示したい
  • Markdownで書きたい

ページ内リンクの原理

<div id="test">
    ................
</div>

上記のようにHTML要素に id が含まれていればMarkdownで [リンクします](#test) というようにページ内リンクを書くことができます。つまりMarkdownで id をつけることができればいいのです。

結論から言います

  • Markdownだけでは id を付与することができない
  • <a name="text"></a> というHTML要素を使う必要がある
# Markdownの見出し<a name="h1"></a>

[見出しへリンク](#h1)

余談

Q : なぜ見出しテキストを <a> タグで囲まないのか?

# <a name="h1">Markdownの見出し</a>

上記のように見出しテキストを <a> で囲んでしまうと、テキスト全体がリンクとして判断されてしまい、アンダーラインがついてしまいます。

Q : なぜ <div>タグではいけないのか?

block要素として判断され、レイアウトが崩れる可能性があります。
Markdownの見出しに利用する場合には問題がないかもしれません。

Q : <a id="text"></a> のように id を指定することもできるが、なぜ name を使うのか?

# Markdownの見出し<a id="h1"></a>

たしかに上記のように id を付与するやり方も可能です。むしろこの方がわかりやすかもしれません。

しかしJavascriptのグローバル変数として認識されてしまいます。そのため、別のJavascriptの中で定義したつもりはないのにグローバル変数として使えてしまい、思わぬ不具合が生じる場合があります。また改めて同名のグローバル変数を宣言すると、ブラウザによっては名前が衝突してうまく動かないことがあります。

そのため、 <a name="text"></a> としてあげる方が良いでしょう

参考文献