MDX

Options

extensions string[]

File extensions to load

Default:

[ ".mdx" ]

recmaPlugins object

List of recma plugins to use

remarkPlugins object

List of remark plugins to use

Default:

[remarkGfm]

rehypeOptions object

Options to pass to rehype

rehypePlugins object

List of rehype plugins to use

useDefaultPlugins boolean

Set false to remove the default plugins

Default:

true

components record

Components to add/override

includes string

Custom includes path

Default:

site.options.includes

Description

MDX is a format that combine Markdown and JSX, so you can write regular Markdown content and import JSX components. This plugin adds support for MDX to create pages in Lume, by creating files with the .mdx extension.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import mdx from "lume/plugins/mdx.ts";

const site = lume();

site.use(mdx(/* Options */));

export default site;

Plugins

MDX uses Remark and Rehype under the hood, so you can add additional plugins. By default it uses the GitHub-flavored markdown, but you can use the remarkPlugins, recmaPlugins and rehypePlugins options to add more:

import lume from "lume/mod.ts";
import mdx from "lume/plugins/mdx.ts";
import a11yEmoji from 'npm:@fec/remark-a11y-emoji';
import rehypeRemoveComments from 'npm:rehype-remove-comments@5';

const site = lume();

site.use(mdx({
  remarkPlugins: [allyEmoji]
  rehypePlugins: [rehypeRemoveComments]
}));

export default site;

Components

In MDX you can use the Lume components from the comp global variable variable or import other components like in JavaScript (with import ... from ...):

---
title: Hello world
description: This is a description
---

import Image from "./_includes/Image.tsx";

<comp.Header title={title} description={description}/>

This is a markdown file with the title **{ title }**.

<Image alt="foo" />

Overwriting components

You can use the components option to overwrite or add additional components. For example, to convert all h1 to h2:

import lume from "lume/mod.ts";
import mdx from "lume/plugins/mdx.ts";

const site = lume();

site.use(mdx({
  components: {
    h1: "h2",
  },
}));

export default site;