README
rehype-code-titles
Rehype plugin for parsing code blocks and adding titles
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
npm install @rockchalkwushock/rehype-code-titles
yarn add @rockchalkwushock/rehype-code-titles
API
rehype().use(rehypeCodeTitles)
Input
## Code Example
```typescript:lib/mdx.ts
// code here
```
Output
<div class="rehype-code-title">lib/mdx.ts</div>
<pre>
<code class="language-typescript">
<!-- HTML parse code here -->
</code>
</pre>
Usage
Use this package as a rehype plugin.
const rehype = require('rehype')
const rehypeCodeTitles = require('@rockchalkwushock/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('@rockchalkwushock/rehype-code-titles')
const rehypePrism = require('@mapbox/rehype-prism')
unified()
.use(rehypeParse)
.use(rehypeCodeTitles)
.use(rehypePrism)
.processSync(/* some html */)
Development
The repository is setup to lint, type-check, and run tests against files that have changed via lint-staged & husky using the pre-commit hook. The repository also enforces conventional commits using commitlint.
git clone https://github.com/rockchalkwushock/rehype-code-titles.git
cd rehype-code-titles
yarn install
yarn build
yarn test