rehype-code-titles

Rehype plugin for parsing code blocks and adding titles to code blocks

Why?

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.

Installation

This package is ESM only:

Node 12+ is needed to use it and it must be imported instead of required.

npm install rehype-code-titles

yarn add rehype-code-titles

pnpm add rehype-code-titles

API

This package exports no identifiers. The default export is rehypeCodeTitles

rehype().use(rehypeCodeTitles[, options])

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

// 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;

}