带有 rehype-autolink-headers 的 gatsby-plugin-mdx 仅适用于 wrap 选项 更新

问题描述

我正在尝试使用 Gatsby + MDX 设置我的站点。我正在查看文档 here 并希望使用 autolink-header-option。我已经尝试为此使用 rehype 和 remark 插件，但我只能让 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"),],},

更新

在尝试了多种配置后，我能够让它按预期工作的方式是使用不同的插件配置。

{
  resolve: `gatsby-plugin-mdx`,options: {
    gatsbyRemarkPlugins: [ `gatsby-remark-autolink-headers` ],plugins: [ `gatsby-remark-autolink-headers` ],}

同时需要 gatsbyRemarkPlugins 和 plugins，如下所示：https://github.com/gatsbyjs/gatsby/issues/15486

解决方法

rehype-autolink-headings 的 README 提到：

此包适用于具有 ID 的标题。向标题添加 ID 的一种方法是在此插件之前使用 remark-slug。

将您的配置更改为以下内容应该可以解决此问题：

{
  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 行，但没有说明它的用途。