Permalink
Fetching contributors…
Cannot retrieve contributors at this time
88 lines (70 sloc) 1.63 KB
---
title: "API Reference"
---
## Plugin Options
### File Extensions
`gatsby-mdx` can apply to different file extensions. By default it
conservatively applies to only `.mdx` files, but can also be made to apply to
`.md` files.
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-mdx`,
options: {
extensions: [".mdx", ".md"]
}
}
]
};
```
## Default Layouts
MDX supports layouts using the default export as such:
```javascript
export default ({ children }) => (
<div>
<h1>My Layout</h1>
<div>{children}</div>
</div>
)
# My MDX
some content
```
or as an import:
```javascript
import PageLayout from './src/components/page-layout';
export PageLayout
# My MDX
some content
```
Sometimes you don't want to include the layout in every file, so `gatsby-mdx`
offers the option to set default layouts in the `gatsby-config.js` plugin
config. Set the key to the `name` set in the `gatsby-source-filesystem` config.
If no matching default layout is found, the `default` default layout is used.
You can also set `options.defaultLayout` if you only want to use one layout for
all MDX pages.
```javascript
module.exports = {
siteMetadata: {
title: `Gatsby MDX Kitchen Sink`
},
plugins: [
{
resolve: `gatsby-mdx`,
options: {
defaultLayouts: {
posts: require.resolve("./src/components/posts-layout.js"),
default: require.resolve("./src/components/default-page-layout.js")
}
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts/`
}
}
]
};
```