Skip to content

Commit

Permalink
Address inconsistency with gatsby-remark-images (#22666)
Browse files Browse the repository at this point in the history
Co-authored-by: Laurie Barth <[email protected]>
  • Loading branch information
LB and Laurie Barth committed Apr 6, 2020
1 parent e24d333 commit 24bc3ea
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
7 changes: 6 additions & 1 deletion docs/docs/working-with-images-in-markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,14 +185,19 @@ 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.
```js:title=gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
resolve: `gatsby-plugin-mdx`,
options: {
Expand Down
5 changes: 4 additions & 1 deletion packages/gatsby-plugin-mdx/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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: {
Expand All @@ -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
Expand Down

0 comments on commit 24bc3ea

Please sign in to comment.