rehype-mdx-title

A rehype MDX plugin for exposing the page title

Table of Contents

• Installation
• Usage
  • Options
    • name
• Compatibility
• License

Installation

npm install rehype-mdx-title

Usage

This plugins exports the page title as a string. If multiple level 1 headers are found, 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.

Options

name

The name of the variable to export the title as. (default: 'title')

Compatibility

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

License

MIT © Remco Haszing