Processing MDX Files

MDX brings JSX components to markdown, which can provide power and flexibility to the main body area of a content piece.

#MDX Content

Contentlayer supports MDX processing via mdx-bundler. By default, Contentlayer processes the main content area of .md and .mdx files as markdown. You can enable this behavior using the contentType option in your document type definition.

defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: 'mdx',
  fields: {
    // ...
  },
}))

#MDX Plugins (remark/rehype)

You can add remark and rehype plugins inside the mdx property when calling makeSource in your Contentlayer configuration.

import { makeSource } from 'contentlayer/source-files'
import highlight from 'rehype-highlight'

export default makeSource({
  // ...
  mdx: { rehypePlugins: [highlight] },
})

---