rehype-inline-code-classname
v1.0.10
Published
A rehype plugin to support adding className to inline code blocks
Downloads
76
Maintainers
Readme
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;