gatsby-plugin-mdx с заголовками rehype-autolink-headers работает только с опцией переноса

Question

Я пытаюсь настроить свой сайт с помощью Gatsby + MDX. Я смотрю на документации здесь и хочу использовать из autolink-header-option. Я пробовал использовать для этого плагины rehype и mark, но я могу заставить работать только плагин Rehype и только с wrapвариант. Я бы предпочел стиль GitHub (по умолчанию) со ссылкой перед заголовком.

Я использую конфигурацию ниже в gatsby-config.js и очищено .cache а также publicпосле обновления файла, чтобы убедиться, что ничего не было кэшировано. Также я не получаю никаких ошибок, все строится и работает успешно, просто нет ссылки на заголовки.

      {
  resolve: `gatsby-plugin-mdx`,
  options: {
    rehypePlugins: [
      // To pass options, use a 2-element array with the
      // configuration in an object in the second element
      require("rehype-autolink-headings"),
    ],
  },
},

Answer 1

README для rehype-autolink-headings упоминает, что:

Этот пакет работает с заголовками, у которых есть идентификаторы. Один из способов добавить идентификаторы к заголовкам - использовать реплику перед этим плагином.

Это должно исправить изменение вашей конфигурации на следующее:

      {
  resolve: `gatsby-plugin-mdx`,
  options: {
    rehypePlugins: [
      require("rehype-slug"),
      // To pass options, use a 2-element array with the
      // configuration in an object in the second element
      require("rehype-autolink-headings"),
    ],
  },
},

Фактически, документация, на которую вы ссылаетесь, содержит этот дополнительный require строка тоже, но она не поясняет, для чего она используется.