README.md

Rehype Code Title

Rehype plugin to add code title.

Install

npm i rehype-code-title

or

yarn add rehype-code-title

Use

markdown:

```tsx:pages/_app.tsx
export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    return (
      <ThemeProvider theme={theme}>
        <ColorModeProvider value="light">
          <CSSReset />
          <Component {...pageProps} />
        </ColorModeProvider>
      </ThemeProvider>
    )
  }
}
```

rehype-code-title:

import { unified } from "unified"
import remark from "remark-parse"
import remark2rehype from "remark-rehype"
import stringify from "rehype-stringify"
import codeTitle from "./index.js"
import * as vfile from "to-vfile"

function compile(file, opt) {
  return unified()
    .use(remark)
    .use(remark2rehype)
    .use(codeTitle, opt)
    .use(stringify)
    .processSync(vfile.readSync("./__example__/" + file))
    .toString()
}

const got = compile("1.md")
console.log(got)

Yields:

<pre><code class="language-tsx">export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props
    return (
      &#x3C;ThemeProvider theme={theme}>
        &#x3C;ColorModeProvider value="light">
          &#x3C;CSSReset />
          &#x3C;Component {...pageProps} />
        &#x3C;/ColorModeProvider>
      &#x3C;/ThemeProvider>
    )
  }
}
</code></pre>