Installation & Setup

Installation

Install rehype-mind-elixir using your preferred package manager.

npm

npm install rehype-mind-elixir

Yarn

yarn add rehype-mind-elixir

pnpm

pnpm add rehype-mind-elixir

Runtime setup

rehype-mind-elixir supports two runtime modes.

CDN

By default, rehype-mind-elixir loads its client resources from a CDN.

No additional imports are required.

rehypeMindElixir({
  useCdn: true,
});

This automatically injects:

• Mind Elixir’s stylesheet
• The rehype-mind-elixir client runtime

An internet connection is required at runtime.

Local

To bundle the client resources with your application, disable CDN mode:

rehypeMindElixir({
  useCdn: false,
});

Then import the resources manually:

import 'mind-elixir/style';
import 'rehype-mind-elixir/client';

Your application’s bundler handles these dependencies, so no internet connection is required at runtime.

Astro

Configure the plugin through Astro’s markdown.rehypePlugins option.

CDN

CDN mode is the default:

import { defineConfig } from 'astro/config';
import rehypeMindElixir from 'rehype-mind-elixir';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeMindElixir,
    ],
  },
});

You can also explicitly enable it:

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypeMindElixir, { useCdn: true }],
    ],
  },
});

No manual imports are required.

Local

Set useCdn to false:

import { defineConfig } from 'astro/config';
import rehypeMindElixir from 'rehype-mind-elixir';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypeMindElixir, { useCdn: false }],
    ],
  },
});

Then import the local resources in your application:

import 'mind-elixir/style';
import 'rehype-mind-elixir/client';

You can then use mind-elixir blocks directly in Markdown:

```mind-elixir
- ZikoJS
  - Core
  - Addons
```

Next.js

For Next.js applications using MDX, configure the plugin through @next/mdx.

CDN

next.config.mjs

import createMDX from '@next/mdx';
import rehypeMindElixir from 'rehype-mind-elixir';

const withMDX = createMDX({
  options: {
    rehypePlugins: [
      rehypeMindElixir,
    ],
  },
});

export default withMDX({
  pageExtensions: [
    'js',
    'jsx',
    'md',
    'mdx',
    'ts',
    'tsx',
  ],
});

No manual imports are required.

Local

next.config.mjs

import createMDX from '@next/mdx';
import rehypeMindElixir from 'rehype-mind-elixir';

const withMDX = createMDX({
  options: {
    rehypePlugins: [
      [rehypeMindElixir, { useCdn: false }],
    ],
  },
});

export default withMDX({
  pageExtensions: [
    'js',
    'jsx',
    'md',
    'mdx',
    'ts',
    'tsx',
  ],
});

Then import the local resources in your application:

import 'mind-elixir/style';
import 'rehype-mind-elixir/client';

Gatsby

Configure the plugin through gatsby-plugin-mdx.

CDN

gatsby-config.js

const rehypeMindElixir = require('rehype-mind-elixir');

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        mdxOptions: {
          rehypePlugins: [
            rehypeMindElixir,
          ],
        },
      },
    },
  ],
};

No manual imports are required.

Local

gatsby-config.js

const rehypeMindElixir = require('rehype-mind-elixir');

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        mdxOptions: {
          rehypePlugins: [
            [rehypeMindElixir, { useCdn: false }],
          ],
        },
      },
    },
  ],
};

Then import the local resources in your application:

import 'mind-elixir/style';
import 'rehype-mind-elixir/client';

Unified

rehype-mind-elixir can also be used directly with Unified.

CDN

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeMindElixir from 'rehype-mind-elixir';
import rehypeStringify from 'rehype-stringify';

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeMindElixir)
  .use(rehypeStringify)
  .process(markdown);

console.log(String(file));

You can explicitly enable CDN mode:

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeMindElixir, {
    useCdn: true,
  })
  .use(rehypeStringify)
  .process(markdown);

Local

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeMindElixir from 'rehype-mind-elixir';
import rehypeStringify from 'rehype-stringify';

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeMindElixir, {
    useCdn: false,
  })
  .use(rehypeStringify)
  .process(markdown);

console.log(String(file));

Then import the local resources in your application:

import 'mind-elixir/style';
import 'rehype-mind-elixir/client';

When using Unified directly, rehype-mind-elixir should run after remark-rehype because it operates on the HAST tree.

Runtime behavior

	useCdn: true	useCdn: false
Default	Yes	No
Automatic resource injection	Yes	No
CDN resources	Yes	No
Manual imports	No	Yes
Bundled by application	No	Yes
Internet required at runtime	Yes	No

See Configuration for the complete useCdn documentation and other plugin options.