Rehype plugin for parsing code blocks and adding titles to code blocks
npm install rehype-code-titles

Rehype plugin for parsing code blocks and adding titles to code blocks
I moved my blog over to using mdx-bundler which uses xdm under the hood to parse the markdown and MDX files. I was using remark-code-titles prior to this move and unfortunately it no longer worked. I believe this was because of the order plugins were being applied internally for xdm. I'd never really worked with remark or rehype directly before and didn't have a lot of experience with ASTs so this was a fun little project that I initially built directly into my blog before pulling it out at a plugin to ship to other developers.
Many thanks to @mottox2, @mapbox, & @wooorm for their prior work in this ecosystem it was of great help when creating this plugin.
> This package is ESM only:
> Node 16+ is needed to use it and it must be imported instead of required.
``shell
npm install rehype-code-titles
yarn add rehype-code-titles
pnpm add rehype-code-titles
bun add rehype-code-titles
`
This plugin supports Node.js 16+, tested on Node 16, 18, 20, and 22.
⚠️ Note: Node 16 reached End-of-Life in September 2023 and no longer receives security updates. We recommend upgrading to Node 18 or 20 (Active LTS) for security and performance improvements.
- Minimum: Node.js 16+ (⚠️ EOL)
- Recommended: Node.js 18+ or 20+ (Active LTS)
- Tested: Node.js 16, 18, 20, 22
This package exports no identifiers. The default export is rehypeCodeTitles
Add support for stripping out code titles from input.
#### options
##### options.customClassName
Specify your own custom css class name to apply. Defaults to rehype-code-title.
Note: you will have to write the CSS implementation yourself.
For example
`css
// some global css file
.rehype-code-title {
margin-bottom: -0.6rem;
padding: 0.5em 1em;
font-family:
Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
background-color: black;
color: white;
z-index: 0;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
}
`
##### options.titleSeparator
Specify the title separator for rehype-code-title. Defaults to: :.
`tsx
// default behavior will be
"language-typescript:lib/mdx.ts"; // the title will be lib/mdx.ts
"language-typescript:title=lib/mdx.ts"; // title will be title=lib/mdx.ts
// titleSeparator set to :title=
"language-typescript:lib/mdx.ts"; // Wont work! 😱. Does not match the separator
"language-typescript:title=lib/mdx.ts"; // title will be lib/mdx.ts
`
``mdCode Example
`typescript:lib/mdx.ts`
// code here``
`html`lib/mdx.ts
Use this package as a rehype plugin.
`javascript
const rehype = require("rehype");
const rehypeCodeTitles = require("rehype-code-titles");
const rehypePrism = require("@mapbox/rehype-prism");
rehype()
.use(rehypeCodeTitles) // should always be before rehypePrism.
.use(rehypePrism)
.process(/ some html /);
`
`javascript
const unified = require("unified");
const rehypeParse = require("rehype-parse");
const rehypeCodeTitles = require("rehype-code-titles");
const rehypePrism = require("@mapbox/rehype-prism");
unified()
.use(rehypeParse)
.use(rehypeCodeTitles)
.use(rehypePrism)
.processSync(/ some html /);
`
This repository uses Bun for package management and testing.
`shell``
git clone https://github.com/rockchalkwushock/rehype-code-titles.git
cd rehype-code-titles
bun installDo cool stuff with code
bun test # Run tests
bun run lint # Run linter
bun run build # Build the package
git add .
git commit -m "feat(src): a cool new feature"
git push
Please visit CONTRIBUTING.md
Thanks goes to these wonderful people (emoji key):
Cody Brunner 💻 📖 ⚠️ | Taran Bains |
This project follows the all-contributors specification. Contributions of any kind welcome!