zennのmarkdownページ内リンクの注意点

8948 ワード
テキストリンク

結論

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>

参考サイト

【.NET】Twitter APIを使って推しの画像に溺れたい②
330 円テンキーで作る 20% キーボード (ハードウェア)