Never Propel Marmalade

    rehype-code-titles
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    rehype-code-titles

    npm

    All Contributors

    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

    This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

    npm install rehype-code-titles
    
    yarn add rehype-code-titles
    
    pnpm 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 @arkweid/lefthook and will run eslint, jest, and prettier against all staged files.

    git clone https://github.com/rockchalkwushock/rehype-code-titles.git
    cd rehype-code-titles
    pnpm i
    # Do cool stuff with code
    git add .
    git commit -m "feat(src): a cool new feature"
    # pre-commit hooks run: eslint, jest, and prettier
    git push

    Contributing

    Please visit CONTRIBUTING.md

    License

    MIT © Cody Brunner

    Contributors

    Thanks goes to these wonderful people (emoji key):


    Cody Brunner

    💻 📖 ⚠️

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

    Install

    npm i rehype-code-titles

    DownloadsWeekly Downloads

    1,922

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.85 kB

    Total Files

    5

    Last publish

    Collaborators

    • rockchalkwushock