Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Address inconsistency with gatsby-remark-images #22666

Merged
merged 1 commit into from
Apr 6, 2020
Merged

Address inconsistency with gatsby-remark-images #22666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/docs/working-with-images-in-markdown.md
View file
Open in desktop
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
View file
Open in desktop
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably keep the --save to ensure that the deps are added to the package.json, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not necessary after npm 5 or something similar. We've slowly been removing it :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://stackoverflow.com/a/19578808

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