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

docs: note MDX with remark-gfm usage #41391

Merged
merged 2 commits into from Oct 13, 2022
Merged

docs: note MDX with remark-gfm usage #41391

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70c367d
docs: note MDX with remark-gfm usage
WestonThayer Oct 13, 2022
8f51d00
Merge branch 'canary' into patch-1
kodiakhq[bot] Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/advanced-features/using-mdx.md
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ However, because markdown is essentially static content, you can't create _dynam

## MDX Plugins

Internally MDX uses remark and rehype. Remark is a markdown processor powered by a plugins ecosystem. This plugin ecosystem lets you parse code, transform `HTML` elements, change syntax, extract frontmatter, and more.
Internally MDX uses remark and rehype. Remark is a markdown processor powered by a plugins ecosystem. This plugin ecosystem lets you parse code, transform `HTML` elements, change syntax, extract frontmatter, and more. Using [remark-gfm to enable GitHub flavored markdown (GFM)](https://mdxjs.com/guides/gfm/) is a popular option.

Rehype is an `HTML` processor, also powered by a plugin ecosystem. Similar to remark, these plugins let you manipulate, sanitize, compile and configure all types of data, elements and content.

Expand Down Expand Up @@ -44,6 +44,9 @@ The following steps outline how to setup `@next/mdx` in your Next.js project:
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
options: {
// If you use remark-gfm, you'll need to use next.config.mjs
// as the package is ESM only
// https://github.com/remarkjs/remark-gfm#install
remarkPlugins: [],
rehypePlugins: [],
// If you use `MDXProvider`, uncomment the following line.
Expand Down