From 24bc3eacccc19705283209ab76333991d15574bd Mon Sep 17 00:00:00 2001 From: LB Date: Mon, 6 Apr 2020 16:38:53 -0400 Subject: [PATCH] Address inconsistency with gatsby-remark-images (#22666) Co-authored-by: Laurie Barth --- docs/docs/working-with-images-in-markdown.md | 7 ++++++- packages/gatsby-plugin-mdx/README.md | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/docs/working-with-images-in-markdown.md b/docs/docs/working-with-images-in-markdown.md index 5498a7a56bfa1..f3837d1164e4f 100644 --- a/docs/docs/working-with-images-in-markdown.md +++ b/docs/docs/working-with-images-in-markdown.md @@ -185,7 +185,11 @@ Configure the plugins in your `gatsby-config` file. As with the previous example ### Using the MDX Plugin -The `gatsby-plugin-mdx` plugin will be used in the example below. Put the `gatsby-remark-images` plugin within the `gatsbyRemarkPlugins` option field of `gatsby-plugin-mdx`. +The below example uses the `gatsby-plugin-mdx` plugin. + +`gatsby-remark-images` needs to be both a sub-plugin of `gatsby-plugin-mdx`, included in the `options` field, and a string entry in the plugins array. `gatsby-plugin-sharp` can be included on its own. + +`gatsby-source-filesystem` needs to be pointed at wherever you have your images on disk, > Note: This example configuration assumes your images and Markdown pages are sourced from the same directory. Check out the section on [configuring for different directories](#configuring-for-images-and-posts-in-different-directories) for additional help. @@ -193,6 +197,7 @@ The `gatsby-plugin-mdx` plugin will be used in the example below. Put the `gatsb module.exports = { plugins: [ `gatsby-plugin-sharp`, + `gatsby-remark-images`, { resolve: `gatsby-plugin-mdx`, options: { diff --git a/packages/gatsby-plugin-mdx/README.md b/packages/gatsby-plugin-mdx/README.md index 9006023a3980d..e84135696b459 100644 --- a/packages/gatsby-plugin-mdx/README.md +++ b/packages/gatsby-plugin-mdx/README.md @@ -52,7 +52,7 @@ MDX seeks to make writing with Markdown and JSX simpler while being more express Install with npm: ```shell -npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react +npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react ``` Install with yarn: @@ -335,6 +335,7 @@ images can be optimized by Gatsby and you should continue using it. // gatsby-config.js module.exports = { plugins: [ + `gatsby-remark-images`, { resolve: `gatsby-plugin-mdx`, options: { @@ -358,6 +359,8 @@ Using a string reference is also supported for `gatsbyRemarkPlugins`. gatsbyRemarkPlugins: [`gatsby-remark-images`] ``` +> Note that in the case of `gatsby-remark-images` the plugin needs to be included as both a sub-plugin of gatsby-plugin-mdx and a string entry in the plugins array. + #### Remark plugins This is a configuration option that is [mirrored from the core MDX