{"_id":"@axe312/gatsby-mdx","_rev":"4-6f87e9c0e98fad9bd0494a72320116d0","name":"@axe312/gatsby-mdx","dist-tags":{"latest":"0.7.3"},"versions":{"0.7.0":{"name":"@axe312/gatsby-mdx","version":"0.7.0","description":"mdx integration for gatsby","main":"index.js","license":"MIT","homepage":"https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/packages/gatsby-mdx#readme","scripts":{"test":"jest"},"peerDependencies":{"@mdx-js/mdx":"^1.0.0","@mdx-js/react":"^1.0.0"},"dependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-object-rest-spread":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","core-js":"2","dataloader":"^1.4.0","debug":"^4.0.1","escape-string-regexp":"^1.0.5","fs-extra":"^7.0.0","gray-matter":"^4.0.1","loader-utils":"^1.2.3","lodash":"^4.17.10","mdast-util-to-string":"^1.0.4","mdast-util-toc":"^3.0.0","mime":"^2.3.1","pretty-bytes":"^5.1.0","remark":"^10.0.0","remark-retext":"^3.1.2","retext-english":"^3.0.2","slash":"^2.0.0","static-site-generator-webpack-plugin":"^3.4.2","underscore.string":"^3.3.4","unist-util-map":"^1.0.4","unist-util-remove":"^1.0.1","unist-util-visit":"^1.4.0"},"devDependencies":{"jest":"^24.0.0","js-combinatorics":"^0.5.3"},"jest":{"testEnvironment":"node"},"keywords":["gatsby","gatsby-plugin","gatsby-transformer-plugin","mdx","markdown","remark","rehype"],"gitHead":"06c03b04520ce989fb254c86cc985b6d826ec917","_resolved":"","_integrity":"","_from":"file:axe312-gatsby-mdx-0.7.0.tgz","_id":"@axe312/gatsby-mdx@0.7.0","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","_npmUser":{"name":"axe312","email":"roetsch.beni@googlemail.com"},"dist":{"integrity":"sha512-09iN8QFwFvi9ekFWEKkV/QkpyBHWJM2tz9oJ7ayOBtTJFz4BvcLxtaYlGM6J0YW8h0X4c+t2hmwLPYwNoask5g==","shasum":"4372544ee23965db93e5e819f19a53569b8d8419","tarball":"https://registry.npmjs.org/@axe312/gatsby-mdx/-/gatsby-mdx-0.7.0.tgz","fileCount":35,"unpackedSize":74501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdC186CRA9TVsSAnZWagAAnSgP/Rmr15VGV/WSX501BNWa\nHMM/MifscC7qGisBdUb//qZ+bx/Uck6ChukAzwZUV4plnaGg+/CXkwDJtUrl\ncMT7V0T4SmvLFlmxT6207bufB+vKeB5bDc2PArvcODwLBsfubscLGX5RuOjN\n3rm6O7Pud5wffuMnDA+XKzV4DPMOI7BCBKrj6zlB3DM4ukK15t5GCKO+ngTt\nMYjBin4KlYrOxoWcBv9Y8HDZbZrkHKndG7+NAb7FwxOQhjWoMNo9JjeaeWbr\nb4AF0Tryk9vgP2fAFxcl8//9DPSLHP0vmZvjDPViLyOmr9LbeY1/f9kpTOZu\nfi8jT0gSXeZxcKZlqtewtGKsEth4biUdYO3y5DBP5kBUIeH2x+eaSbWWprxa\nareHRuFv44KK4VCF9wRAW8fDpgckS6CPQujyl1wTGmDuIHa0zATET4NCg73S\n0F/BzTekVReKsihcsNN/udlkAKoF+G9aYC7wSBogp3GZnyJXj1tbBFGFwWXc\nXQFjTxBguN9fAjVpMfmJ9OzopZAs7zppLvQdF8IMKzT3PuWIAexG6wGHfIR6\nbgMxldpJbGUNhyVYikJyacXCjQRXINX/uYIfOyxB07J+EzEt8KNTtlsVeyB+\nngXX/uhKDhUHxr9V/5xNMmYK7d6GN7sX9jRtJ0saBYCVOI7NoRfHEuwd4SdS\naZJ0\r\n=aOco\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLgQg7LClLD43z3UutQdtFYMHLFVOdQ271lw/ORPMAMAiEA6ft4LFaHkNhCa5VQKR/4dvWOeyN6pP20mURDvtpPC5Q="}]},"maintainers":[{"name":"axe312","email":"roetsch.beni@googlemail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-mdx_0.7.0_1561026361950_0.7101066121812367"},"_hasShrinkwrap":false},"0.7.1":{"name":"@axe312/gatsby-mdx","version":"0.7.1","description":"mdx integration for gatsby","main":"index.js","license":"MIT","homepage":"https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/packages/gatsby-mdx#readme","scripts":{"test":"jest"},"peerDependencies":{"@mdx-js/mdx":"^1.0.0","@mdx-js/react":"^1.0.0"},"dependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-object-rest-spread":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","core-js":"2","dataloader":"^1.4.0","debug":"^4.0.1","escape-string-regexp":"^1.0.5","fs-extra":"^7.0.0","gray-matter":"^4.0.1","loader-utils":"^1.2.3","lodash":"^4.17.10","mdast-util-to-string":"^1.0.4","mdast-util-toc":"^3.0.0","mime":"^2.3.1","pretty-bytes":"^5.1.0","remark":"^10.0.0","remark-retext":"^3.1.2","retext-english":"^3.0.2","slash":"^2.0.0","static-site-generator-webpack-plugin":"^3.4.2","underscore.string":"^3.3.4","unist-util-map":"^1.0.4","unist-util-remove":"^1.0.1","unist-util-visit":"^1.4.0"},"devDependencies":{"jest":"^24.0.0","js-combinatorics":"^0.5.3"},"jest":{"testEnvironment":"node"},"keywords":["gatsby","gatsby-plugin","gatsby-transformer-plugin","mdx","markdown","remark","rehype"],"gitHead":"0872ab8e75d4afb74355f36730e9e36cab9fd4f9","_resolved":"","_integrity":"","_from":"file:axe312-gatsby-mdx-0.7.1.tgz","_id":"@axe312/gatsby-mdx@0.7.1","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","_npmUser":{"name":"axe312","email":"roetsch.beni@googlemail.com"},"dist":{"integrity":"sha512-hNZd/6tMfXnrSstPDWP5OwY4n8bgVo33YPha8izJjqg4DKZ6U7sYWkZOT0MOp+5Ry1iFBOal4jYT8FjUw7uarw==","shasum":"8a43f419e98684e1c42e5575d18e746c72a48fcb","tarball":"https://registry.npmjs.org/@axe312/gatsby-mdx/-/gatsby-mdx-0.7.1.tgz","fileCount":35,"unpackedSize":74975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdC2ZKCRA9TVsSAnZWagAAxn4QAJwqf4LDlMRwZz8+k+Sl\nsiUcXddu3yVkUM8RWjYZba1veLA1Sq7CXMgJanBt9BTHmt9NsabssgCsSNWB\nsQoyzKUGq98FmplMgR3iFov82mEaRlw8i/xpN4RwOtM8LBHMxvqAu7RDOr6b\nT5UEgCVj+RNCTXU4ejlDcQHF8UwEN4pBy5lLSjFqVAGtsNyvmkKRfzUQa2Tb\nf01ROxmp1MmDBpp5RWJTLDfezcieNZ1pcr729rkcnMxchqkb0dOLHm5Mp2E+\npFkwEe+LyDj687WD0pRup+83GQmEdNtzasWiSJ830XPfQt9AHjanUIY3nn1u\nPXkYhqbD1eorhRXtcfMOiN3SCRO0UOzssIbl2+ARt9aRVxOg+J+xCRmGiL5T\n67gF45bQ+4gf/lNq5Mlv2pIVYLVbQ4AmI9fxCPAvZxln1C92UPcCp98Ue/NM\nflBNdy75unkkSy0e4pgbJ21LI76/KDTphI+GM3ldfPlsDkpxV0Nuuo0OzJCV\nVgqPHiTTMkwAw/YpXaa6xvFcrq5SVp+Y6m7l00PokoPuzrzXTnPwR3ez4yS5\n+jZ4tmZFqKC2aMDIJNjY13otzW6U/qJdiztiWCCBdlHQIaLLYiRhNhp1aNBW\niwz9ZSv3y8QsrHJmcxIo/ePNeGZgjImxIfj0I8AeAZVPHzSxQfMFVPsQLbQK\nN54H\r\n=orZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA075tcsblGokMNZNQ+pHdDvBPvxIgVV+DlxLBxRY1h9AiBx6jWyHB1vu8qsxAyB7mqN9/BwnQ7IGxD6rdsDJOmVZg=="}]},"maintainers":[{"name":"axe312","email":"roetsch.beni@googlemail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-mdx_0.7.1_1561028169240_0.4774773014199942"},"_hasShrinkwrap":false},"0.7.2":{"name":"@axe312/gatsby-mdx","version":"0.7.2","description":"mdx integration for gatsby","main":"index.js","license":"MIT","homepage":"https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/packages/gatsby-mdx#readme","scripts":{"test":"jest"},"private":false,"peerDependencies":{"@mdx-js/mdx":"^1.0.0","@mdx-js/react":"^1.0.0"},"dependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-object-rest-spread":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","core-js":"2","dataloader":"^1.4.0","debug":"^4.0.1","escape-string-regexp":"^1.0.5","fs-extra":"^7.0.0","gray-matter":"^4.0.1","loader-utils":"^1.2.3","lodash":"^4.17.10","mdast-util-to-string":"^1.0.4","mdast-util-toc":"^3.0.0","mime":"^2.3.1","pretty-bytes":"^5.1.0","remark":"^10.0.0","remark-retext":"^3.1.2","retext-english":"^3.0.2","slash":"^2.0.0","static-site-generator-webpack-plugin":"^3.4.2","underscore.string":"^3.3.4","unist-util-map":"^1.0.4","unist-util-remove":"^1.0.1","unist-util-visit":"^1.4.0"},"devDependencies":{"jest":"^24.0.0","js-combinatorics":"^0.5.3"},"jest":{"testEnvironment":"node"},"keywords":["gatsby","gatsby-plugin","gatsby-transformer-plugin","mdx","markdown","remark","rehype"],"_id":"@axe312/gatsby-mdx@0.7.2","_nodeVersion":"12.2.0","_npmVersion":"6.9.0","_npmUser":{"name":"axe312","email":"roetsch.beni@googlemail.com"},"dist":{"integrity":"sha512-/mC12j6rWpYBgVTvjUqH4Lo22VhMhauzf0oDBC9xjdwMpdPoASGblZuSi6KIx0RIGqUE8MfroBUXgaQwe+4YPw==","shasum":"ef56a7c3bf7ed418affa7539064d499d00020924","tarball":"https://registry.npmjs.org/@axe312/gatsby-mdx/-/gatsby-mdx-0.7.2.tgz","fileCount":35,"unpackedSize":74938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEIdYCRA9TVsSAnZWagAAlH0P/j5MX9BZ8LFCofndCHC2\n+1ATKgn9L3CbOo/DoqfBYBiVrhmW5QLUZrA/ZOgFbldjT1lfj8mpNt1No+l4\nn4hEeuRi9gnZspf5HqeWOx1BY46y1El45Ok2vqPe3inPsF2Ux8YziXOTc2dO\nSFEUaPUij10wO3KS72rWD+MsH+jx37TEdoOv1YRypu2i+yPUiiE+yJEth8yW\n7FSUWI4iIwBtbR/k4j/9/c3Hj433VUnSX3mDHnk8LfoqVxSVqlvLWcFK/z9J\nZ4Ld5s0LgFXQTxDlLGQRYMPhgjRz86cAMeKgwAPjPC8fmQwbGkZqOnNMru7I\nOW/oMTOb8QVsXrZL6oDzwppFwm2yxj4Lvp3unZ9dm/364sZWT8FuUQNrF9qU\nS0DMBdSd7EuThKVSFzqWtclMGijMq6EfIDlyPZ/HfDgklibpAW4D9PpLcrVf\nUJxkICG3a2qHEwwphUn5/drYL5HcmqiRgev8lhoqyo+RPMiHdV0dYnQ34MBq\ng98bCBOYK2PLGxIW6au60c+hYngMuuqn9Tm/RUC2J7uLfUu5oHQgb5/TSVHa\nHS11r1Xufxt7DB7DZBSI2oeVI5E2wHP2xOkXlahhUnaNGujG3CVLj14mqg0O\nxzBBYAtXnsVAGYw/iqHsu4L8Qwjoex95muu7fQjga+xx6M8iU7elHP4nXSsR\nmBIg\r\n=DHWD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQXocJNlfaXgqVV5iOttRpm7Fd/+fY9+3j4grtKQI6nAiEA7sdHIQvADYUbsELXFS7jlRXxI4w/Bb0gx40ZRGxMI/g="}]},"maintainers":[{"name":"axe312","email":"roetsch.beni@googlemail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-mdx_0.7.2_1561364312151_0.14000855828745906"},"_hasShrinkwrap":false},"0.7.3":{"name":"@axe312/gatsby-mdx","version":"0.7.3","description":"mdx integration for gatsby","main":"index.js","license":"MIT","homepage":"https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/packages/gatsby-mdx#readme","scripts":{"test":"jest"},"private":false,"peerDependencies":{"@mdx-js/mdx":"^1.0.0","@mdx-js/react":"^1.0.0"},"dependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-object-rest-spread":"^7.4.3","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","core-js":"2","dataloader":"^1.4.0","debug":"^4.0.1","escape-string-regexp":"^1.0.5","fs-extra":"^7.0.0","gray-matter":"^4.0.1","loader-utils":"^1.2.3","lodash":"^4.17.10","mdast-util-to-string":"^1.0.4","mdast-util-toc":"^3.0.0","mime":"^2.3.1","pretty-bytes":"^5.1.0","remark":"^10.0.0","remark-retext":"^3.1.2","retext-english":"^3.0.2","slash":"^2.0.0","static-site-generator-webpack-plugin":"^3.4.2","underscore.string":"^3.3.4","unist-util-map":"^1.0.4","unist-util-remove":"^1.0.1","unist-util-visit":"^1.4.0"},"devDependencies":{"jest":"^24.0.0","js-combinatorics":"^0.5.3"},"jest":{"testEnvironment":"node"},"keywords":["gatsby","gatsby-plugin","gatsby-transformer-plugin","mdx","markdown","remark","rehype"],"_id":"@axe312/gatsby-mdx@0.7.3","_nodeVersion":"12.2.0","_npmVersion":"6.9.0","_npmUser":{"name":"axe312","email":"roetsch.beni@googlemail.com"},"dist":{"integrity":"sha512-IR2kV0lc7HM7ucs/jplLZHaiw5dTyTiTN4kheTksjHNk57cOZK5mRORKys+2qn+p5cY2OWOMUaEPCHKotfQqjA==","shasum":"14df98eb863fab02936fb126d7353e3550180770","tarball":"https://registry.npmjs.org/@axe312/gatsby-mdx/-/gatsby-mdx-0.7.3.tgz","fileCount":35,"unpackedSize":74938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEIeXCRA9TVsSAnZWagAAXGkQAKIMJqRONKpP9OYoacS5\nndY8V+GQqpgt1LxrIVyhX8zf5prkH2Qya949c9HdZbbBZBrJNSfOYJ7xJL+p\noCbdksDSdM+5H7BaWzdKtr15BBrJDO2EgPVNvn8AlYpDIetlaIQe2Lm8A9PR\nrQSOdTGeB1oC+MowYttpDaMm8PnlgJORCXJTyBZnbE/c06BWaq6c1qZNb8JY\nV5gxy4JL5duTKnAnV7QfjG+jV42MZv2m+1X960k22SUm3cNATZ3e4STx+umG\nytQfGGNYO/BMgLaS0x2x93HwSX7Y65viFwYS/niw9uOshucLb/cGOIDtLYNa\nWUlKWLAR9SBUTbQPj4fniEEJj/o6MSh8rTqSk/GhZPx/xwrCg7BBTkTSgjJ6\nucvDlQX6oZnH31Hos2pKe4oumFdeGivye7aY0peigivvUE9RHebAyxf2oCa9\nDWhi+BN5S4DF4CT/ytvWNhLnYurEcq18zmJ8OvaJJsP1m/KMTRH7wz+y+sCw\nCY/61QOrmzPRfVTxiLsh1spfZ5xGfI42X44iMJocYLCVaBZ5IXUuPYA02MXz\nJUzRjk0kN7qGdb86PfLCw7iW4xQk5vORiMpfFKiSnY9wpD5qCDqiVkuoJOBO\nG3CnzL787T1SmFC7gUJ9opjq9e0DUNkbdJtOw113IpHYgVEDaoEA9n+NaHz9\nAXxY\r\n=I3C7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWktnbeF2wHXwl8dkynOVYGW45kt6AnmxABTRiQNYIegIhANm8CSZzHU6RLG7ob6+G9JsNByVHomJmdIk/E5gI9vR5"}]},"maintainers":[{"name":"axe312","email":"roetsch.beni@googlemail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-mdx_0.7.3_1561364374762_0.9330110103176585"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-20T10:26:01.949Z","0.7.0":"2019-06-20T10:26:02.070Z","modified":"2022-04-04T17:08:47.045Z","0.7.1":"2019-06-20T10:56:09.403Z","0.7.2":"2019-06-24T08:18:32.276Z","0.7.3":"2019-06-24T08:19:34.890Z"},"maintainers":[{"name":"axe312","email":"roetsch.beni@googlemail.com"}],"description":"mdx integration for gatsby","homepage":"https://github.com/ChristopherBiscardi/gatsby-mdx/tree/master/packages/gatsby-mdx#readme","keywords":["gatsby","gatsby-plugin","gatsby-transformer-plugin","mdx","markdown","remark","rehype"],"license":"MIT","readme":"![Logo](../../img/gatsby-mdx.png)\n\n> gatsby-mdx is _the_ official integration for using [MDX](https://mdxjs.com)\n> with [Gatsby](https://www.gatsbyjs.org/).\n\n# What’s MDX?\n\nMDX is markdown for the component era. It lets you write JSX embedded inside\nmarkdown. It’s a great combination because it allows you to use markdown’s often\nterse syntax (such as `# heading`) for the little things and JSX for more advanced\ncomponents.\n\n### Read more about MDX\n\n- [:grey_question: Why MDX?](https://www.gatsbyjs.org/docs/mdx/why/)\n- [:books: Gatsby guide](https://www.gatsbyjs.org/docs/mdx/)\n- [:mega: Language](https://mdxjs.com)\n- [:woman_scientist: Specification](https://github.com/mdx-js/specification)\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Configuration](#configuration)\n    - [Extensions](#extensions)\n    - [Default layouts](#default-layouts)\n    - [Global scope](#global-scope)\n    - [Gatbsy remark plugins](#gatsby-remark-plugins)\n    - [Markdown plugins](#remark-plugins)\n    - [HAST plugins](#rehype-plugins)\n    - [Media types](#media-types)\n  - [Components](#components)\n    - [MDXProvider](#mdxprovider)\n    - [MDXRenderer](#mdxrenderer)\n\n## Installation\n\nInstall with npm:\n\n```sh\nnpm install --save gatsby-mdx @mdx-js/mdx @mdx-js/tag @mdx-js/react\n```\n\nInstall with yarn:\n\n```sh\nyarn add gatsby-mdx @mdx-js/mdx @mdx-js/tag @mdx-js/react\n```\n\n## Usage\n\nAfter installing gatsby-mdx you can add it to your plugins list in your\n`gatsby-config.js`.\n\n```js\nmodule.exports = {\n  plugins: [`gatsby-mdx`]\n};\n```\n\nBy default, this configuration will allow you to create pages\nwith `.mdx` files in `src/pages` and will process any Gatsby nodes\nwith Markdown media types into MDX content.\n\n### Configuration\n\ngatsby-mdx exposes a configuration API that can be used similarly to\nany other Gatsby plugin. You can define MDX extensions, layouts, global\nscope, and more.\n\n| Key                                                                                        | Default                                | Description                                                          |\n| ------------------------------------------------------------------------------------------ | -------------------------------------- | -------------------------------------------------------------------- |\n| [`extensions`](#extensions)                                                                | `[\".mdx\"]`                             | Configure the file extensions that gatsby-mdx will process           |\n| [`defaultLayouts`](#default-layouts)                                                       | `{}`                                   | Set the layout components for MDX source types                       |\n| [`globalScope`](#global-scope)                                                             | `\"\"`                                   | Define components and variables that are accessible to all MDX files |\n| [`gatsbyRemarkPlugins`](#gatsby-remark-plugins) | `[]` | Use Gatsby-specific remark plugins |\n| [`remarkPlugins`](#remark-plugins)                                                         | `[]`                                   | Specify remark plugins                                               |\n| [`rehypePlugins`](#rehype-plugins)                                                         | `[]`                                   | Specify rehype plugins                                               |\n| [`mediaTypes`](#media-types)                                                               | `[\"text/markdown\", \"text/x-markdown\"]` | Determine which media types are processed by MDX                     |\n\n#### Extensions\n\nBy default, only files with the `.mdx` file extension are treated as MDX when\nusing `gatsby-source-filesystem`. To use `.md` or other file extensions, you can\ndefine an array of file extensions in the `gatsby-mdx` section of your\n`gatsby-config.js`.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        extensions: [`.mdx`, `.md`]\n      }\n    }\n  ]\n};\n```\n\n#### Default layouts\n\n`defaultLayouts` takes an object where the `key` is the `name` key of\nthe `gatsby-source-filesystem` configuration you want to\ntarget. `default` applies to any MDX file that doesn't already have a\nlayout defined, even if it's imported manually using `import MDX from './thing.mdx`.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        defaultLayouts: {\n          posts: require.resolve(\"./src/components/posts-layout.js\"),\n          default: require.resolve(\"./src/components/default-page-layout.js\")\n        }\n      }\n    }\n  ]\n};\n```\n\nMDX has the concept of a layout that is different than the Gatsby\nconcept of a layout. MDX's layouts are written using the default\nexport JavaScript syntax in a single MDX file. An MDX layout will wrap\nthe MDX content in an additional component, so this can be a good\nplace for page layout depending on how you are using MDX.\n\n```javascript\nexport default ({ children }) => (\n  <div>\n    <h1>My Layout</h1>\n    <div>{children}</div>\n  </div>\n)\n\n# My MDX\n\nsome content\n```\n\nor as an import:\n\n```javascript\nimport PageLayout from './src/components/page-layout';\n\nexport default PageLayout\n\n# My MDX\n\nsome content\n```\n\nSometimes you don't want to include the layout in every file, so `gatsby-mdx`\noffers the option to set default layouts in the `gatsby-config.js` plugin\nconfig. Set the key to the `name` set in the `gatsby-source-filesystem` config.\nIf no matching default layout is found, the `default` default layout is used.\n\nYou can also set `options.defaultLayout.default` if you only want to\nuse one layout for all MDX pages that don't already have a layout defined.\n\n```js\nmodule.exports = {\n  siteMetadata: {\n    title: `Gatsby MDX Kitchen Sink`\n  },\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        defaultLayouts: {\n          posts: require.resolve(\"./src/components/posts-layout.js\"),\n          default: require.resolve(\"./src/components/default-page-layout.js\")\n        }\n      }\n    },\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        name: `posts`,\n        path: `${__dirname}/src/posts/`\n      }\n    }\n  ]\n};\n```\n\n#### Global scope\n\nWhen importing a react component into your MDX, you can import it using the `import`\nstatement as in JavaScript.\n\n```mdx\nimport { SketchPicker } from \"react-color\";\n\n# Hello, world!\n\nHere's a color picker!\n\n<SketchPicker />\n```\n\nIf you want to allow usage of a component from anywhere, add it to the `globalScope`\nfield in the options inside `gatsby-config.js`:\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        globalScope: `\n          import { SketchPicker } from \"react-color\";\n\n          export default { SketchPicker };\n        `\n      }\n    }\n  ]\n};\n```\n\nAll that is needed is to import the components you wish to be globally available and\nthen put them into an exported object.\n\nThen, in any MDX file, you can insert the components without the import.\n\n```mdx\n# Hello, world!\n\nHere's a color picker\n\n<SketchPicker />\n```\n\n> :warning: Note: globalScope is not working yet in any mdx file in `src/pages`, but there is an\n> issue to resolve this:\n>\n> ChristopherBiscardi/gatsby-mdx#239\n\n#### Gatsby remark plugins\n\nThis config option is used for compatibility with a set of plugins many people\n[use with remark](https://www.gatsbyjs.org/plugins/?=gatsby-remark-) that require\nthe gatsby environment to function properly. In some cases, like\n[gatsby-remark-prismjs](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/?=gatsby-remark-),\nit makes more sense to use a library like\n[prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer)\nto render codeblocks using a [React\ncomponent](/api-reference/mdx-provider). In other cases, like\n[gatsby-remark-images](https://www.gatsbyjs.org/packages/gatsby-remark-images/?=gatsby-remark-),\nthe interaction with the Gatsby APIs is well deserved because the\nimages can be optimized by Gatsby and you should continue using it.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        gatsbyRemarkPlugins: [\n          {\n            resolve: `gatsby-remark-images`,\n            options: {\n              maxWidth: 590\n            }\n          }\n        ]\n      }\n    }\n  ]\n};\n```\n\n###### Note:\n\nUsing a string reference is currently not supported for `gatsbyRemarkPlugins`. (A PR would be accepted for this)\n\n```js\ngatsbyRemarkPlugins: [`gatsby-remark-images`];\n```\n\n#### MD plugins\n\nThis is a configuration option that is [mirrored from the core MDX\nprocessing pipeline](https://mdxjs.com/plugins). It enables the use of\n[remark\nplugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md)\nfor processing MDX content.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        remarkPlugins: [require(\"remark-abbr\")]\n      }\n    }\n  ]\n};\n```\n\n#### HAST plugins\n\nThis is a configuration option that is [mirrored from the core MDX\nprocessing pipeline](https://mdxjs.com/plugins). It enables the use of\n[rehype\nplugins](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md)\nfor processing MDX content.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        rehypePlugins: [require(\"rehype-slug\")]\n      }\n    }\n  ]\n};\n```\n\n#### Media types\n\nDeciding what content gets processed by gatsby-mdx. This is an\nadvanced option that is useful for dealing with specialized generated\ncontent. It is not intended to be configured for most users.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-mdx`,\n      options: {\n        mediaTypes: [`text/markdown`, `text/x-markdown`]\n      }\n    }\n  ]\n};\n```\n\n##### Explanation\n\nGatsby includes the media-type of the content on any given node. For\n`file` nodes, we choose whether to process the content with MDX or not\nby the file extension. For remote content or generated content, we\nchoose which nodes to process by looking at the media type.\n\n### Components\n\nMDX and gatsby-mdx use components for different things like rendering\nand component mappings.\n\n#### MDXProvider\n\n`MDXProvider` is a React component that allows you to replace the\nrendering of tags in MDX content. It does this by providing a list of\ncomponents via context to the internal `MDXTag` component that handles\nrendering of base tags like `p` and `h1`. There are two special tags\nthat can be replaced too: `inlineCode` and `wrapper`. `inlineCode` is\nfor inline `<code>` and `wrapper` is the special element that wraps\nall of the MDX content.\n\n```js\nimport { MDXProvider } from \"@mdx-js/react\";\n\nconst MyH1 = props => <h1 style={{ color: \"tomato\" }} {...props} />;\nconst MyParagraph = props => (\n  <p style={{ fontSize: \"18px\", lineHeight: 1.6 }} />\n);\n\nconst components = {\n  h1: MyH1,\n  p: MyParagraph\n};\n\nexport const wrapRootElement = ({ element }) => (\n  <MDXProvider components={components}>{element}</MDXProvider>\n);\n```\n\nThe following components can be customized with the MDXProvider:\n\n| Tag             | Name                                                                 | Syntax                                              |\n| --------------- | -------------------------------------------------------------------- | --------------------------------------------------- |\n| `p`             | [Paragraph](https://github.com/syntax-tree/mdast#paragraph)          |                                                     |\n| `h1`            | [Heading 1](https://github.com/syntax-tree/mdast#heading)            | `#`                                                 |\n| `h2`            | [Heading 2](https://github.com/syntax-tree/mdast#heading)            | `##`                                                |\n| `h3`            | [Heading 3](https://github.com/syntax-tree/mdast#heading)            | `###`                                               |\n| `h4`            | [Heading 4](https://github.com/syntax-tree/mdast#heading)            | `####`                                              |\n| `h5`            | [Heading 5](https://github.com/syntax-tree/mdast#heading)            | `#####`                                             |\n| `h6`            | [Heading 6](https://github.com/syntax-tree/mdast#heading)            | `######`                                            |\n| `thematicBreak` | [Thematic break](https://github.com/syntax-tree/mdast#thematicbreak) | `***`                                               |\n| `blockquote`    | [Blockquote](https://github.com/syntax-tree/mdast#blockquote)        | `>`                                                 |\n| `ul`            | [List](https://github.com/syntax-tree/mdast#list)                    | `-`                                                 |\n| `ol`            | [Ordered list](https://github.com/syntax-tree/mdast#list)            | `1.`                                                |\n| `li`            | [List item](https://github.com/syntax-tree/mdast#listitem)           |                                                     |\n| `table`         | [Table](https://github.com/syntax-tree/mdast#table)                  | `--- | --- | ---`                                   |\n| `tr`            | [Table row](https://github.com/syntax-tree/mdast#tablerow)           | `This | is | a | table row`                         |\n| `td`/`th`       | [Table cell](https://github.com/syntax-tree/mdast#tablecell)         |                                                     |\n| `pre`           | [Pre](https://github.com/syntax-tree/mdast#code)                     |                                                     |\n| `code`          | [Code](https://github.com/syntax-tree/mdast#code)                    |                                                     |\n| `em`            | [Emphasis](https://github.com/syntax-tree/mdast#emphasis)            | `_emphasis_`                                        |\n| `strong`        | [Strong](https://github.com/syntax-tree/mdast#strong)                | `**strong**`                                        |\n| `delete`        | [Delete](https://github.com/syntax-tree/mdast#delete)                | `~~strikethrough~~`                                 |\n| `code`          | [InlineCode](https://github.com/syntax-tree/mdast#inlinecode)        |                                                     |\n| `hr`            | [Break](https://github.com/syntax-tree/mdast#break)                  | `---`                                               |\n| `a`             | [Link](https://github.com/syntax-tree/mdast#link)                    | `<https://mdxjs.com>` or `[MDX](https://mdxjs.com)` |\n| `img`           | [Image](https://github.com/syntax-tree/mdast#image)                  | `![alt](https://mdx-logo.now.sh)`                   |\n\nIt's important to define the `components` you pass in in a stable way\nso that the references don't change if you want to be able to navigate\nto a hash. That's why we defined `components` outside of any render\nfunctions in these examples.\n\n##### Related\n\n- [MDX components](https://mdxjs.com/getting-started/#mdxprovider)\n\n#### MDXRenderer\n\n`MDXRenderer` is a React component that takes _compiled_ MDX content and\nrenders it. You will need to use this if your MDX content is coming\nfrom a GraphQL page query or `StaticQuery`.\n\n`MDXRenderer` takes any prop and passes it on to your MDX content,\njust like a normal React component.\n\n```js\n<MDXRenderer title=\"My Stuff!\">{mdx.code.body}</MDXRenderer>\n```\n\nUsing a page query:\n\n```js\nimport { MDXRenderer } from \"gatsby-mdx\";\n\nexport default class MyPageLayout {\n  render() {\n    <MDXRenderer>{this.props.data.mdx.code.body}</MDXRenderer>;\n  }\n}\n\nexport const pageQuery = graphql`\n  query MDXQuery($id: String!) {\n    mdx(id: { eq: $id }) {\n      id\n      code {\n        body\n      }\n    }\n  }\n`;\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}