Rehype-mdx-title NPM

rehype-mdx-title

A rehype MDX plugin for exposing the page title

Installation

npm install rehype-mdx-title

Usage

This plugins exports the page title as a string. If multiple matching headers are found, othe highest ranking header is used. If multiple headers are found with the same rank, the first one in the document is used. The header is converted to a string using mdast-util-to-string

For example, given a file named example.mdx with the following contents:

# The [answer](https://www.google.com/search?q=What+is+answer+to+life+the+universe+and+everything) to _life_, the `universe`, and **everything**

{title} is 42

The following script:

import { readFile } from 'node:fs/promises'

import { compile } from '@mdx-js/mdx'
import rehypeMdxTitle from 'rehype-mdx-title'

const { value } = await compile(await readFile('example.mdx'), {
  jsx: true,
  rehypePlugins: [rehypeMdxTitle]
})
console.log(value)

Roughly yields:

export const title = 'The answer to life, the universe, and everything'

export default function MDXContent() {
  return (
    <>
      <h1>
        {'The '}
        <a href="https://www.google.com/search?q=What+is+answer+to+life+the+universe+and+everything">
          answer
        </a>
        {' to '}
        <em>life</em>
        {', the '}
        <code>universe</code>
        {', and '}
        <strong>everything</strong>
      </h1>
      <p>
        {title}
        {' is 42'}
      </p>
    </>
  )
}

Use rehype-raw if you wish to use custom <h1> headers. This only works if the MDX format option is set to 'md'. Beware this also changes the MDX component output.

API

Options

name (string) — The name of the variable to export the title as. (default: 'title')
maxRank (number) — The maximum heading rank to consider. (default: '1')