The Complete Guide to MDX 2.0

• What is MDX?
• Defining constants with exports
• remark/rehype and "mdx" plugins
• What is createElement?

Authoring MDX

• Interleaving JSX and markdown
  • inline
  • block-level
  • in headings
• Using Components
• Using Shortcodes
• Defining metadata

MDX Syntax Features

• imports
• exports
• jsx
• [transclusion] rendering other MDX docs

Customizing MDX

MDXProvider

• What is the MDXProvider
• wrapper component (default export vs MDXProvider replacement)
• inlineCode component

Code Blocks

• How metastrings work
• syntax highlighting (prism-react-renderer)
• react-live repl

Popular remark plugins

• remark-math
• remark-katex
• autolink-headings
• emoji?
• remark-github
• remark-oembed

Programming MDX

• async api, sync api, compiler
• Overview of the MDXAST

Using the MDX node API

Internals

• remark, rehype, jsx compilation pipeline
• jsx pragma
• How MDX decides what to render
• makeShortcode
• isMDXComponent
• remark-mdx

Writing remark/rehype plugins

• utils
• unist utils
• unist-util-visit
• Using retext plugins

Framework specific stuff?

gatsby-plugin-mdx

Next MDX

MDX Render Targets

React

Preact

Render MDX to the Terminal

Building a Vue app that uses MDX