まめせぶん

<h1 id="vivliostyle%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8Bpdf%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8no.%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#vivliostyle%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8Bpdf%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AB%E3%83%9A%E3%83%BC%E3%82%B8no.%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> vivliostyleで作成するPDFのドキュメント内リンクにページNo.を表示する</h1>
<h2 id="%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99" aria-hidden="true"></a> 参考資料</h2>
ページの参照の例があったので、次のドキュメントを参考にした。 
mdxの原稿をAstroを使ってHTMLに変換し、vivliostyleを使用してPDFを作成する素敵なリポジトリである。
<iframe id="zenn-embedded__521849fe16eb7" src="https://embed.zenn.studio/card#zenn-embedded__521849fe16eb7" data-content="https%3A%2F%2Fgithub.com%2Fspring-raining%2Fvivliostyle" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/spring-raining/vivliostyle" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/spring-raining/vivliostyle</a>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" aria-hidden="true"></a> サンプル</h2>
<h3 id="pdf%E5%87%BA%E5%8A%9B%E4%BE%8B">
<a class="header-anchor-link" href="#pdf%E5%87%BA%E5%8A%9B%E4%BE%8B" aria-hidden="true"></a> PDF出力例</h3>
<div class="code-block-container"><pre class="language-pdf"><code class="language-pdf">設定A(235P)で設定します。
</code></pre></div><h3 id="%E3%82%B3%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> コード</h3>
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;p&gt;&lt;a data-component="Anchor" data-ref="sec" href="../xxx/index.html#feature"&gt;設定A&lt;/a&gt;で設定します。&lt;/p&gt;
</code></pre></div><div class="code-block-container"><pre class="language-css"><code class="language-css">:root {
 --vs-theme--color-accent-1: 150 150 255;
 --vs-theme--section-call-after-content: "(" target-counter(attr(href), page) "P)";
 --vs-theme--section-call-after-display: inline;
}

a[data-ref="sec"]::after {
 content: var(--vs-theme--section-call-after-content);
 display: var(--vs-theme--section-call-after-display);
 color: rgb(var(--vs-theme--color-accent-1));
 margin-inline: 0.25em;
}
</code></pre></div>