Awesome
rehype-mdx-title
A rehype MDX plugin for exposing the page title
Table of Contents
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
)
Compatibility
This project is compatible with Node.js 16 or greater.