MDX Components

MDX

File locations:

  • src/components/mdx/mdx-components.tsx

This is a set of multiple components that will be used to generate your blog posts. These components dictates how Next.js will convert your .mdx file into HTML.

Currently we have created:

  • A custom <img> component that changes on hover, and shows in a new tab when clicked.
  • A custom <a> component that differentiates internal and external links.
  • A custom codeblock component with syntax highlighting, line highlighting, line-numbers, as well as a copy button.