rehype-inline-code-classname

A unified(rehype) plugin to support adding className to inline code blocks

Description

This plugin takes inline code blocks in Markdown, and allows users to add a class name to it:

The following Markdown:

`highlighted^const inline = "code";`

Gets converted to:

<code class="highlighted"> const inline = "code"; </code>

The separator by default is ^, but it can be changed in the configuration.

Configuration

• config.separator: [String] The character that separates the class name from the content.
• config.trailing: [Boolean] If true, it will try to find the class name at the end of the string.

Option: separator

Using a custom separator:

const result = await unified()
  // using '*' as the separator
  .use(rehypeInlineCodeClassNamePlugin, { separator: "*" });

The markdown:

`highlighted*const inline = "code";`

Is parsed as:

<code class="highlighted">const inline = "code";</code>

Option: trailing

const result = await unified()
  // using '*' as the separator
  .use(rehypeInlineCodeClassNamePlugin, { trailing: true });

The markdown:

`const inline = "code";^highlighted`

Is parsed as:

<code class="highlighted">const inline = "code";</code>

Using unified

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { read } from "to-vfile";

import rehypeInlineCodeClassNamePlugin from "rehype-inline-code-classname";

const result = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeInlineCodeClassNamePlugin)
  // add more plugins
  .process(await read("./test/example.md"));

Using MDX factory (for Next.js)

import withMDXFactory from "@next/mdx";
import rehypeInlineCodeClassNamePlugin from "rehype-inline-code-classname";

const withMDX = withMDXFactory({
  extension: /\.mdx?$/,
  options: {
    rehypePlugins: [rehypeInlineCodeClassNamePlugin],
    providerImportSource: "@mdx-js/react",
  },
});

const nextConfig = withMDX({
  // next.js configuration
});

export default nextConfig;