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:

const unified = require("unified")
const remark = require("remark-parse")
const remark2rehype = require("remark-rehype")
const stringify = require("rehype-stringify")
const vfile = require("to-vfile")

const codeTitle = require("rehype-code-title")

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

Yields:

<div class="my-code">
  <h1>pages/_app.tsx</h1>
  <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>
</div>