Zenn での Markdown ページ内リンクの書き方

結論

Zenn でページ内リンクを使用するとき, 見出しは以下のルールに従って変換する.

• アルファベットは大文字を小文字に変換する.
• 半角スペース, 全角スペースはハイフンに変換する.
• 全角記号, 半角記号は URL エンコードする.
• 先頭のスペース, インライン数式は無視する.

概要

Markdown において, ページ内リンクはアンカーリンクを使用することで実現できる.

[リンク](#見出し)

Zenn では公式ドキュメントにおいて, この方法について言及されていないが, 他のサイトと同様に機能する. しかし, 見出しに記号やスペースが含まれている場合, そのまま入力しても正しくリンクが貼られない. そこで, 正しくリンクするための書き方について調べてみた.

調査方法

Markdown を HTML に変換したとき, 各見出しへ付与されるid要素を, zenn-cli のプレビュー機能を用いて調べる.

結果

入力 Markdown:

<!-- 半角英数字 -->
# ABCDEFGabcdefg123
<!-- 全角英数字 -->
# あいうえおＡＢＣａｂｃ１２３
<!-- 半角記号とスペース -->
# !@#$%^&*()+|~=`[]{};':",./<>_ ?
<!-- 全角記号とスペース -->
# ！＠＃＄％＾＆＊（）＋｜〜＝￥｀「」｛｝；’：”、。・＜＞＿　？
<!-- インライン数式 -->
# $a=b$
<!-- 先頭にスペース -->
#  ABC

出力 HTML:

<h1 id="abcdefgabcdefg123">...</h1>
<h1 id="%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A%EF%BD%81%EF%BD%82%EF%BD%83%EF%BD%81%EF%BD%82%EF%BD%83%EF%BC%91%EF%BC%92%EF%BC%93">...</h1>
<h1 id="!%40%23%24%25%5E%26*()%2B%7C~%3D%60%5B%5D%7B%7D%3B'%3A%22%2C.%2F%3C%3E_-%3F">...</h1>
<h1 id="%EF%BC%81%EF%BC%A0%EF%BC%83%EF%BC%84%EF%BC%85%EF%BC%BE%EF%BC%86%EF%BC%8A%EF%BC%88%EF%BC%89%EF%BC%8B%EF%BD%9C%E3%80%9C%EF%BC%9D%EF%BF%A5%EF%BD%80%E3%80%8C%E3%80%8D%EF%BD%9B%EF%BD%9D%EF%BC%9B%E2%80%99%EF%BC%9A%E2%80%9D%E3%80%81%E3%80%82%E3%83%BB%EF%BC%9C%EF%BC%9E%EF%BC%BF-%EF%BC%9F">...</h1>
<h1 id>...</h1>
<h1 id="abc">...</h1>

この結果を以下に示す.

• 半角英数字は大文字のアルファベットのみ小文字に変換する.
• 半角スペース, 全角スペースはハイフンに変換する.
• 全角文字, 全角記号は, 大文字アルファベットを小文字に変換したのち, URL エンコードする.
• 半角記号は, URL 内で使用できる-_.!~*'()以外は URL エンコードする.
• 先頭のスペース, インライン数式は無視する.

ただし, 全角文字はエンコードせずとも機能する.

上記の結果は他サイト, 例えば Qiita とは異なるため注意が必要である.

補足

なお, 見出しが重複した場合, id要素の末尾に-nと番号が振られる.

# heading
# heading
# heading
# heading

<h1 id="heading">...</h1>
<h1 id="heading-1">...</h1>
<h1 id="heading-2">...</h1>
<h1 id="heading-3">...</h1>

参考サイト

• Qiita Markdownのページ内リンクの罠
• HTMLアンカーリンク（a hrefタグ）とは