diff --git a/packages/gatsby-plugin-mdx/README.md b/packages/gatsby-plugin-mdx/README.md index 0ac46d6b804a0..62388d19c9b4b 100644 --- a/packages/gatsby-plugin-mdx/README.md +++ b/packages/gatsby-plugin-mdx/README.md @@ -38,11 +38,13 @@ MDX seeks to make writing with Markdown and JSX simpler while being more express - [Gatsby remark plugins](#gatsby-remark-plugins) - [Remark plugins](#remark-plugins) - [Rehype plugins](#rehype-plugins) + - [Media types](#media-types) + - [Explanation](#explanation) + - [shouldBlockNodeFromTransformation](#shouldblocknodefromtransformation) - [Components](#components) - [MDXProvider](#mdxprovider) - [Related](#related) - - [Troubleshooting](#troubleshooting) - - [Excerpts for non-latin languages](#excerpts-for-non-latin-languages) + - [MDXRenderer](#mdxrenderer) - [License](#license) ## Installation @@ -50,7 +52,7 @@ MDX seeks to make writing with Markdown and JSX simpler while being more express Install: ```shell -npm install gatsby-plugin-mdx @mdx-js/react +npm install gatsby-plugin-mdx @mdx-js/mdx@v1 @mdx-js/react@v1 ``` ## Usage @@ -111,13 +113,16 @@ module.exports = { any other Gatsby plugin. You can define MDX extensions, layouts, global scope, and more. -| Key | Default | Description | -| ----------------------------------------------- | ---------- | ----------------------------------------------------------------- | -| [`extensions`](#extensions) | `[".mdx"]` | Configure the file extensions that gatsby-plugin-mdx will process | -| [`defaultLayouts`](#default-layouts) | `{}` | Set the layout components for MDX source types | -| [`gatsbyRemarkPlugins`](#gatsby-remark-plugins) | `[]` | Use Gatsby-specific remark plugins | -| [`remarkPlugins`](#remark-plugins) | `[]` | Specify remark plugins | -| [`rehypePlugins`](#rehype-plugins) | `[]` | Specify rehype plugins | +| Key | Default | Description | +| ------------------------------------------------------------------------- | -------------------------------------- | --------------------------------------------------------------------- | +| [`extensions`](#extensions) | `[".mdx"]` | Configure the file extensions that gatsby-plugin-mdx will process | +| [`defaultLayouts`](#default-layouts) | `{}` | Set the layout components for MDX source types | +| [`gatsbyRemarkPlugins`](#gatsby-remark-plugins) | `[]` | Use Gatsby-specific remark plugins | +| [`remarkPlugins`](#remark-plugins) | `[]` | Specify remark plugins | +| [`rehypePlugins`](#rehype-plugins) | `[]` | Specify rehype plugins | +| [`mediaTypes`](#media-types) | `["text/markdown", "text/x-markdown"]` | Determine which media types are processed by MDX | +| [`shouldBlockNodeFromTransformation`](#shouldblocknodefromtransformation) | `(node) => false` | Disable MDX transformation for nodes where this function returns true | +| [`commonmark`](#commonmark) | `false` | Use CommonMark | #### Extensions @@ -406,6 +411,61 @@ module.exports = { } ``` +#### Media types + +Deciding what content gets processed by `gatsby-plugin-mdx`. This is an +advanced option that is useful for dealing with specialized generated +content. It is not intended to be configured for most users. + +```js +// gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `gatsby-plugin-mdx`, + options: { + mediaTypes: [`text/markdown`, `text/x-markdown`], + }, + }, + ], +} +``` + +##### Explanation + +Gatsby includes the media-type of the content on any given node. For +`file` nodes, we choose whether to process the content with MDX or not +by the file extension. For remote content or generated content, we +choose which nodes to process by looking at the media type. + +#### shouldBlockNodeFromTransformation + +Given a function `(node) => Boolean` allows you to decide for each node if it should be transformed or not. + +```js +// gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `gatsby-plugin-mdx`, + options: { + shouldBlockNodeFromTransformation(node) { + return ( + [`NPMPackage`, `NPMPackageReadme`].includes(node.internal.type) || + (node.internal.type === `File` && + path.parse(node.dir).dir.endsWith(`packages`)) + ) + }, + }, + }, + ], +} +``` + +#### CommonMark + +MDX will be parsed using CommonMark. + ### Components MDX and `gatsby-plugin-mdx` use components for different things like rendering @@ -481,7 +541,41 @@ You can also expose any custom component to every mdx file using ##### Related -- [React context for MDX](https://mdxjs.com/packages/react/#use) +- [MDX components](https://mdxjs.com/getting-started/#mdxprovider) + +#### MDXRenderer + +`MDXRenderer` is a React component that takes _compiled_ MDX content and +renders it. You will need to use this if your MDX content is coming +from a GraphQL page query or `StaticQuery`. + +`MDXRenderer` takes any prop and passes it on to your MDX content, +just like a normal React component. + +```jsx +{mdx.body} +``` + +Using a page query: + +```jsx +import { MDXRenderer } from "gatsby-plugin-mdx" + +export default class MyPageLayout { + render() { + return {this.props.data.mdx.body} + } +} + +export const pageQuery = graphql` + query MDXQuery($id: String!) { + mdx(id: { eq: $id }) { + id + body + } + } +` +``` ## Troubleshooting