Building Websites with MDX and Gatsby

Overview

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents.
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
Together, they combine to create a powerful platform for docs, blogs, and other rich applications.

Syllabus

Introduction to MDX
Install MDX in a New Gatsby Project
Use a React Component from NPM in an MDX File with Gatsby MDX
Use MDXProvider to Control the Rendering of Markdown Elements with Gatsby MDX
Replace the MDX Content Wrapper with an MDXProvider in Gatsby MDX
Create a Live Code Component with Gatsby MDX and React Live
Syntax Highlighting Code Blocks using Components with Prism React Renderer and Gatsby MDX
Compose Syntax Highlighting and Live Code Examples using MDXProvider with Gatsby MDX
Processing Markdown File Extensions with Gatsby MDX
Access Props inside MDX within a Gatsby Application