70 %

Toast is in Beta!Learn more →

Chris Biscardi

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
  • 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