rehype-code-title

const { Component, pageProps } = this.props
return (
  <ThemeProvider theme={theme}>
    <ColorModeProvider value="light">
      <CSSReset />
      <Component {...pageProps} />
    </ColorModeProvider>
  </ThemeProvider>
)

````

**rehype-code-title:**

```js
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()
}

<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 (
      <ThemeProvider theme={theme}>
        <ColorModeProvider value="light">
          <CSSReset />
          <Component {...pageProps} />
        </ColorModeProvider>
      </ThemeProvider>
    )
  }
}
</code></pre>
</div>