XENEXE

AstroJS で生成される Footnote (脚注) をカスタマイズする


heroImage

1. はじめに

AstroJS では、標準で remark-gfm が組み込まれています 1 。そのため、Markdown 内に Footnote を定義することが出来ます。しかし、標準設定だと h2 タグやFootnotes テキストが出力されたりと、扱いにくい部分があります。そこで、本記事では AstroJS で生成される Footnote をカスタマイズする方法について記述します。また、本記事は Node.js と Yarn がインストール済みの前提で記述しています。

Terminal window
1
$ node -v
2
v20.11.0
3
$ yarn -v
4
1.22.21

2. テンプレート

本記事では、検証用として AstroJS 公式が配布している blog template を使用します。yarn create astro でインストールして、yarn run dev で起動します。ローカルササーバーが起動したら、Footnote が定義されている http://localhost:4321/blog/markdown-style-guide/ に移動します。

Terminal window
1
$ yarn create astro
2
yarn create v1.22.21
3
[1/4] Resolving packages...
4
[2/4] Fetching packages...
5
[3/4] Linking dependencies...
6
[4/4] Building fresh packages...
7
success Installed "create-astro@4.7.2" with binaries:
8
      - create-astro
9
[########################################] 40/40
10
 astro   Launch sequence initiated.
11


12
   dir   Where should we create your new project?
13
         ./tender-trappist
14


15
  tmpl   How would you like to start your new project?
16
         Use blog template
17


18
    ts   Do you plan to write TypeScript?
19
         Yes
20


21
   use   How strict should TypeScript be?
22
         Strict
23


24
  deps   Install dependencies?
25
         Yes
26


27
   git   Initialize a new git repository?
28
         No
29
      ◼  Sounds good! You can always run git init manually.
30


31
      ✔  Project initialized!
32
         ■ Template copied
33
         ■ TypeScript customized
34
         ■ Dependencies installed
35


36
  next   Liftoff confirmed. Explore your project!
37


38
         Enter your project directory using cd ./tender-trappist
39
         Run yarn dev to start the dev server. CTRL+C to stop.
40
         Add frameworks like react or tailwind using astro add.
41


42
         Stuck? Join us at https://astro.build/chat
43


44
╭─────╮  Houston:
45
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
46
╰─────╯
47
$ cd tender-trappist
48
$ yarn run dev

http://localhost:4322/blog/markdown-style-guide/ の HTML を確認すると、以下のような Footnote が出力されていると思います。

1
<section data-footnotes="" class="footnotes">
2
  <h2 class="sr-only" id="footnote-label">Footnotes</h2>
3
  <ol>
4
    <li id="user-content-fn-1">
5
      <p>
6
        The above quote is excerpted from Rob Pike’s
7
        <a href="https://www.youtube.com/watch?v=PAAkCSZUG1c">talk</a> during Gopherfest, November 18, 2015.
8
        <a
9
          href="#user-content-fnref-1"
10
          data-footnote-backref=""
11
          aria-label="Back to reference 1"
12
          class="data-footnote-backref"
13
          >↩</a
14
        >
15
      </p>
16
    </li>
17
  </ol>
18
</section>

3. カスタマイズ

Footnote は、astro.config.mjs の markdown.remarkRehype 2 を編集することで、カスタマイズすることが出来ます。代表的な設定項目のデフォルト値を明記すると、以下のようなコードになります。

astro.config.mjs
1
export default defineConfig({
2
  site: 'https://example.com',
3
  integrations: [],
4
  markdown: {
5
    remarkRehype: {
6
      footnoteBackContent: '↩',
7
      footnoteBackLabel: 'Back to reference 1',
8
      footnoteLabel: 'Footnotes',
9
      footnoteLabelProperties: { className: ['sr-only'] },
10
      footnoteLabelTagName: 'h2',
11
    },
12
  },
13
})

Footnotes と sr-only を削除し、h2 タグから hr タグに変更するようなカスタマイズをすると、以下のようなコードになります。

astro.config.mjs
1
export default defineConfig({
2
  site: 'https://example.com',
3
  integrations: [],
4
  markdown: {
5
    remarkRehype: {
6
      footnoteBackContent: '↩',
7
      footnoteBackLabel: 'Back to reference 1',
8
      footnoteLabel: ' ',
9
      footnoteLabelProperties: { className: [''] },
10
      footnoteLabelTagName: 'hr',
11
    },
12
  },
13
})

Web ブラウザで確認すると、以下のように出力されると思います。

上記では、代表的な設定項目のみを明記しています。他の設定項目について詳しく知りたい場合は、remark-rehype の公式ドキュメント 3 を参照ください。

4. おわりに

ここまで、AstroJS で生成される Footnote をカスタマイズする方法について記述してきました。筆者が、unified (remark, rehype) について勉強不足だったので、思いの外、時間を費やしてしまいました。GatsbJS を採用していた頃に、キチンと勉強しておくべきだったと反省しています。

  1. Astro Docs, Markdown & MDX, Configuring Markdown and MDX：https://docs.astro.build/en/guides/markdown-content/#configuring-markdown-and-mdx ↩

  2. Astro Docs,Configuration Reference,markdown.remarkRehype：https://docs.astro.build/ja/reference/configuration-reference/#markdownremarkrehype ↩

  3. Github, remarkjs/remark-rehype：https://github.com/remarkjs/remark-rehype ↩