RX100で撮り歩くブログ

RX100やRollei B35で写真を撮ったり何やかんやするブログ

gatsby-remark-autolink-headersでマークダウンの見出しに自動でidを割り当てる

Gatsbyで gatsby-transformer-remark を使ってマークダウンを使えるようにし、見出しにidを付けたくなった場合は gatsby-remark-autolink-headers という gatsby-transformer-remark のプラグインを追加する

yarn add gatsby-remark-autolink-headers

gatsby-config.js に設定を追加。すでに gatsby-transformer-remark を導入している前提です。

{
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              offsetY: `30`,
              icon: false,
              className: `custom-class`,
              maintainCase: true,
            },
          },
        ],
      },
    },

iconはfalseにすると非表示になりますが、何も指定しないかsvgを指定すると、以下のようにマウスオーバーでリンクアイコンを表示してくれます。

f:id:mismith:20210627220949p:plain