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
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.
This package is ESM only: Node 12+ is needed to use it and it must be
imported instead of
npm install rehype-code-titles yarn add rehype-code-titles pnpm add rehype-code-titles
## Code Example ```typescript:lib/mdx.ts // code here ```
<div class="rehype-code-title">lib/mdx.ts</div> <pre> <code class="language-typescript"> <!-- HTML parse code here --> </code> </pre>
Use this package as a rehype plugin.
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 */)
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 makes use of
@arkweid/lefthook and will run
against all staged files.
git clone https://github.com/rockchalkwushock/rehype-code-titles.git cd rehype-code-titles pnpm i # Do cool stuff with code git add . git commit -m "feat(src): a cool new feature" # pre-commit hooks run: eslint, jest, and prettier git push
Please visit CONTRIBUTING.md
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!