rehype-mdx-title

A rehype MDX plugin for exposing the page title

Table of Contents

• Installation
• Usage
• API
  • Options
• Compatibility
• License

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)

In addition it supports unist-util-mdx-define options.

Compatibility

This project is compatible with Node.js 16 or greater.

License

MIT © Remco Haszing