README

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

npm install rehype-code-titles

yarn add 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('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 */)

Development

This repository makes use of @commitlint and requires you to write your commits following this guideline. It also makes use of lint-staged & husky to check your code in the pre-commit hook. On commit your code will be linted, type checked, and should any of the code touch test suites those suites will be ran.

git clone https://github.com/rockchalkwushock/rehype-code-titles.git
cd rehype-code-titles
yarn install
# Do cool stuff with code
git add .
yarn commit
# pre-commit hooks run: eslint, tsc, and jest
git push

Contributing

Please visit CONTRIBUTING.md

License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Cody Brunner}
💻 📖 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Usage no npm install needed!