https://github.com/josestg/rehype-code-title

Rehype plugin to add code title.
https://github.com/josestg/rehype-code-title

mdx-prism prism rehype rehype-plugin remark remark-plugin unifiedjs

Last synced: about 1 month ago
JSON representation

Rehype plugin to add code title.

• Host: GitHub
• URL: https://github.com/josestg/rehype-code-title
• Owner: josestg
• License: mit
• Created: 2020-08-23T12:53:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-11-15T12:54:38.000Z (about 3 years ago)
• Last Synced: 2024-11-25T04:00:17.696Z (about 1 month ago)
• Topics: mdx-prism, prism, rehype, rehype-plugin, remark, remark-plugin, unifiedjs
• Language: JavaScript
• Homepage:
• Size: 74.2 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Rehype Code Title

[![Build Status](https://travis-ci.com/josestg/rehype-code-title.svg?token=1ZtvVXXQrZXVL8domfez&branch=master)](https://travis-ci.com/josestg/rehype-code-title)

![release](https://badgen.net/github/release/josestg/rehype-code-title)

![npm](https://badgen.net/npm/v/rehype-code-title)

[Rehype](https://github.com/rehypejs/rehype) plugin to add code title.

## Install

```shell

npm i rehype-code-title

or

yarn add rehype-code-title

```

## Use

**markdown:**

````md

```tsx:pages/_app.tsx

export default class App extends NextApp {

  render() {

    const { Component, pageProps } = this.props

    return (

      

        

          

          

        

      

    )

  }

}

```

````

**rehype-code-title:**

```js

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:**

```html

export default class App extends NextApp {

  render() {

    const { Component, pageProps } = this.props

    return (

      <ThemeProvider theme={theme}>

        <ColorModeProvider value="light">

          <CSSReset />

          <Component {...pageProps} />

        </ColorModeProvider>

      </ThemeProvider>

    )

  }

}



```