From afb06d7167d1fcb318f9d2ab23c762c0069b61a7 Mon Sep 17 00:00:00 2001 From: Trang Le Date: Thu, 26 Aug 2021 14:50:40 +0700 Subject: [PATCH] chore(docs): Add hint for MDX plugin in remark-plugin-tutorial (#32876) Co-authored-by: Lennart --- docs/tutorial/remark-plugin-tutorial.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/tutorial/remark-plugin-tutorial.md b/docs/tutorial/remark-plugin-tutorial.md index 494cca2707c53..9d4e091dd0c41 100644 --- a/docs/tutorial/remark-plugin-tutorial.md +++ b/docs/tutorial/remark-plugin-tutorial.md @@ -164,6 +164,27 @@ If you want to add some options, you could switch to the object syntax: } ``` +### `gatsby-plugin-mdx` + +In case you use `gatsby-plugin-mdx` in place of `gatsby-transformer-remark`, the former takes an array config option named `gatsbyRemarkPlugins` that allows compatibility with Gatsby's remark plugins. + +To make `gatsby-plugin-mdx` recognize a local plugin like `gatsby-remark-purple-headers`, you need to point to its location in the project through `require.resolve`. + +```js +{ + resolve: `gatsby-plugin-mdx`, + options: { + gatsbyRemarkPlugins: [ + { + resolve: require.resolve(`./plugins/gatsby-remark-purple-headers`), + } + ] + } +} +``` + +However, if the sub-plugin is published and installed via npm, simply refer to it by name as the case with using `gatsby-transformer-remark`. + ## Find and Modify Markdown Nodes When modifying nodes, you'll want to walk the tree and then implement new functionality on specific nodes.