Kanapa

Installation

Install Kanapa via your favorite package manager:

bun install kanapa

bun install kanapa

Exports:

Kanapa provides the following exports:

• Code - A server component that renders a code block

  Props:

  • lang: string - The language of the code block
  • code?: string - The code to render
  • children?: string - The code to render (either children or code props will work - the code prop will take precedence.)
  • className?: string - An (optional) string of class names to apply to the code block
  • theme?: string - An (optional) theme to explicitly render as - if this is provided there will not be a fallback theme rendered.

• MDXCode - A server component meant for use with transformed MDX (e.g. pass directly via useMDXComponents)

  Props:

  • children: ReactElement - A ReactElement representing the transformed code element from the MDX transform.
  • className?: string - An (optional) string of class names to apply to the code block

Additionally, a updateConfig function is exported to update the configuration (light and dark themes, as well as CSS selectors to show the right theme) at runtime.

import { updateConfig } from "kanapa";

// set the themes and selectors at runtime
updateConfig({
  themes: {
    dark: "vitesse-dark",
    light: "vitesse-light",
  },
  // 'system' will use a media query to match the user's OS theme
  selectors: "system",
  // otherwise you can provide an object of 'light' and 'dark' keys
  // specifying the selectors to match on, e.g.:
  selectors: {
    light: "html.light",
    dark: "html.dark",
  },
});

import { updateConfig } from "kanapa";

// set the themes and selectors at runtime
updateConfig({
  themes: {
    dark: "vitesse-dark",
    light: "vitesse-light",
  },
  // 'system' will use a media query to match the user's OS theme
  selectors: "system",
  // otherwise you can provide an object of 'light' and 'dark' keys
  // specifying the selectors to match on, e.g.:
  selectors: {
    light: "html.light",
    dark: "html.dark",
  },
});

The default config is:

{
  themes: {
    dark: "vitesse-dark",
    light: "vitesse-light",
  },
  selectors: "system",
}

{
  themes: {
    dark: "vitesse-dark",
    light: "vitesse-light",
  },
  selectors: "system",
}

You can find the supported themes here and languages here.

MDX Usage:

If you're working with MDX, you can use the MDXCode component to render code blocks. You'll want to configure the rehype-mdx-code-props rehype plugin to transform the code blocks, and then configure your MDX runtime to use the MDXCode component as the "pre" element.

Here's an example of how to set this up with Next.js:

// in mdx-components.ts

export function useMDXComponents() {
  return {
    pre: MDXCode,
  };
}

// in mdx-components.ts

export function useMDXComponents() {
  return {
    pre: MDXCode,
  };
}

Then in your MDX you can use plain old markdown code blocks/fences:

some markdown here
With a code block inside:

```tsx
function MyComponent() {
  return <div>Hello, world!</div>;
}
```

some markdown here
With a code block inside:

```tsx
function MyComponent() {
  return <div>Hello, world!</div>;
}
```