Remark Show

UsageCopy Anchor Link

Remark Show is a remark plugin. Fumadocs MDX and @fumadocs/astro enable it by default on both unified and Sätteri. See Show for the syntax.

It decides conditions from the values in define. By default, those are the path params in file.data.params, read as props, and the public env vars. It runs before other remark plugins, so they only see the branches that show.

Build-Time ValuesCopy Anchor Link

define works like the define option of Vite: each key is a name that code reads, like import.meta.env.EDITION. With Vite, the variables of .env files are only in import.meta.env, so add them yourself:

import { defineConfig } from 'fumadocs-mdx/config';
import { loadEnv } from 'vite';

const env = loadEnv(process.env.NODE_ENV ?? 'development', process.cwd(), 'VITE_');

export default defineConfig({
  mdxOptions: {
    remarkShowOptions: { define: { 'import.meta.env': env } },
  },
});

A function decides the values of each page from its params. The defaults it doesn't return are read when rendering, like the other params here:

import type { RemarkShowOptions } from 'fumadocs-core/mdx-plugins/remark-show';

const remarkShowOptions: RemarkShowOptions = {
  define: ({ params, defaults }) => ({
    'import.meta.env': defaults['import.meta.env'],
    'props.framework': params?.framework,
  }),
};

Custom SourcesCopy Anchor Link

A custom source that compiles MDX itself passes the params of each page as file.data.params, when dataAt() compiles the page for them. The other expressions of the page read the params as props, so pass them to the compiled content when rendering too.

Ports to other compilers, like the Sätteri one, build on createShowContext(), which evaluates conditions with the build-time values.