Gatsby: How to add options to remarkPlugins/rehypePlugins for gatsby-plugin-mdx

[codepunkt]

Is there a way to define options for remark or rehype plugins using the remarkPlugins and rehypePlugins options of gatsby-plugin-mdx?

I couldn't find one - at least there's none documented.

[pieh]

Looking at https://mdxjs.com/advanced/plugins/#using-remark-and-rehype-plugins

It seems you can do something like this:

remarkPlugins: [
  // instead of using single value with remarkPlugin - use 2 element array
  // where first element is remarkPlugin and second one is options
  [someRemarkPlugin, { someOption: "foo" }]
]

I'm not sure if same thing applies to rehypePlugins, but it's worth a try

[codepunkt]

Thanks. This way of defining options work for both remarkPlugins and rehypePlugins:

 {
  resolve: 'gatsby-plugin-mdx',
  options: {
    extensions: ['.mdx'],
    defaultLayouts: {
      default: require.resolve('./src/templates/blog-post.js'),
    },
    remarkPlugins: [
      // adds target _blank to external links and defines an appropriate
      // link type of 'nofollow,noopener,noreferrer'
      [
        require('remark-external-links'),
        { content: { type: 'text', value: '(opens in a new window)' } },
      ],
    ],
    rehypePlugins: [
      // adds id attributes to headings
      require('rehype-slug'),
      // adds links pointing to the headings
      [
        require('rehype-autolink-headings'),
        { properties: { ariaHidden: true }, content: [] },
      ],
    ],
  },
},

[karlhorky]

@codepunkt This is super useful configuration (and probably pretty common)! Maybe adding this to the docs of the plugin would be a good idea?

[karlhorky]

With the following configuration, the link wraps the heading content instead, which is what I expected it to do:

rehypePlugins: [
  // Add links pointing to the headings
  [require('rehype-autolink-headings'), { behavior: 'wrap' }],
],

[karlhorky]

I've added configuration to the docs of gatsby-plugin-mdx in #27301.