vivliostyle/vfm

手動で目次を作成した時に`#`以降に特定の文字を指定すると、ページ番号が`??`になりリンクされない

kght6123 opened this issue · 3 comments

kght6123 commented

Describe the bug
句読点などを含むHeaderに#を使って、目次からHeaderへのリンクを作るとページ番号が??になり、リンクされなくなります。（サンプルコード）

1. [Manuscript2](manuscript2.html)
    1. [吾輩は猫である21（通常）](manuscript2.html#吾輩は猫である21)
    1. [吾輩は、猫である22（句読点あり）](manuscript2.html#吾輩は、猫である22)
 （以下、省略）

https://github.com/kght6123/kght6123-book-template/blob/c40c1f7a615b94c573aec0a8f8aa0b1bdb490457/toc.md?plain=1#L6

<!-- manuscript2.mdの記述 -->
## 吾輩は、猫である22

この書生の掌の{裏|うち}でしばらくはよい
（以下、省略）

https://github.com/kght6123/kght6123-book-template/blob/c40c1f7a615b94c573aec0a8f8aa0b1bdb490457/manuscript2.md?plain=1#L9

To Reproduce
下記のリポジトリをクローンして、npm installしてnpm run devする
https://github.com/kght6123/kght6123-book-template/

Screenshots

スクリーンショット 2023-01-10 22 52 45

他にもわかっているだけで、下記の様なアットマーク、全角かっこ、半角空白、全角プラスで発生します。
（半角かっこでも起きます、全角半角の区別はないのかもしれません。）

    1. [吾輩は猫である23（URLエンコード、空白なし）](manuscript2.html#%E5%90%BE%E8%BC%A9%E3%81%AF%E7%8C%AB%E3%81%A7%E3%81%82%E3%82%8B23)
    1. [@吾輩は猫である24（@あり）](manuscript2.html#@吾輩は猫である24)
    1. [吾輩は（猫）である25（括弧あり）](manuscript2.html#吾輩は（猫）である25)
    1. [吾輩は 猫 である26（URLエンコード、空白あり）](manuscript2.html#%E5%90%BE%E8%BC%A9%E3%81%AF+%E7%8C%AB+%E3%81%A7%E3%81%82%E3%82%8B26)
    1. [吾輩は猫＋である27（プラスあり）](manuscript2.html#吾輩は猫＋である27)

Desktop:

  • OS: macOS 13.0.1 M1 Pro
  • Browser Chromium（previewで起動するブラウザ）
  • Version 108.0.5359.29（Developer Build）（arm64）
MurakamiShinyu commented

「ページ番号が??になりリンクされない」という問題の箇所のHTMLコードは

            <li><a href="manuscript2.html#%E5%90%BE%E8%BC%A9%E3%81%AF%E3%80%81%E7%8C%AB%E3%81%A7%E3%81%82%E3%82%8B22">吾輩は、猫である22（句読点あり）</a></li>

でこのリンクのURLをデコードすると manuscript2.html#吾輩は、猫である22 です。

リンク先のHTMLファイルの「吾輩は、猫である22」のところは次のようになってます：

      <section id="吾輩は猫である22" class="level2">
        <h2>吾輩は、猫である22</h2>

リンクのURLのフラグメントで参照されてるidは 吾輩は、猫である22 ですが、実際のidは句読点が削除された 吾輩は猫である22 ですので、idが一致しないので当然リンクエラーになります。

まず、これは Vivliostyle.js の問題ではなく、vfm でのMarkdown→HTML変換でのid自動生成の規則に関する問題ですので、issueをvfmに移します。

  • 👍2
MurakamiShinyu commented

MarkdownからHTMLへの変換において、見出しからidを自動生成するとき、見出しの文字列をそのままidにするわけではありません。idには通常使えない文字があります。そのため空白は "-" に置き換え、句読点類は削除などされます。また、idは文書内で重複したものは使えないので、同じテキスト内容の見出しが複数あった場合は、自動的に連番をふって重複のないidが生成されます。

ですので、Markdownで文書内の見出しへのリンクを書くときは、生成されたHTMLでidを確認して、そのidをリンク先のURLのフラグメントで指定するのが確実かと思います。あるいは、見出しに明示的にidを指定する方法もあります。（Markdownの見出しのあとに {#hoge} のように書く）

以上、これはバグではないので、bugのラベルは外します。

  • 👍2
kght6123 commented

ご確認いただきありがとうございます。
ご助言いただいた、Markdownの見出しのあとに {#hoge} のように明示的に書く方法や、idには通常使えない文字を置き換えたり削除する方法、そもそもこれらの文字を見出して使わない等で回避しようと思います。

  • 👍1