Dynamic linked heading does not interpolate link properly

[sumanthratna]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

3.0.1

Link to runnable example

Steps to reproduce

This is my MDX file:

export const metadata = {
  path: "/blog/new-post",
  title: "This is a Fake Title",
};

# <>[{metadata.title}]({metadata.path})</>

hey again

Expected behavior

The above MDX should render the following HTML after interpolating metadata.path:

<h1><a href="/blog/new-post">This is a Fake Title</a></h1>
<p>hey again</p>

Actual behavior

The above MDX renders the following HTML:

<h1><a href="%7Bmetadata.path%7D">This is a Fake Title</a></h1>
<p>hey again</p>

Note that the link text is interpolated properly, but not the link href.

Runtime

Node v21

Package manager

yarn v4

OS

macOS

Build and bundle tools

Next.js

[wooorm]

Hey!

That is indeed not something that works. It is intentional. MDX is not a template language.

# <a href={metadata.path}>{metadata.title}</a>

[sumanthratna]

Thanks for clarifying @wooorm! I am still a little confused about the mechanics of interpolation.

The following does not interpolate the title:

# `{metadata.title}`

The following does:

# ~**_{metadata.title}_**~

Is there a rule to understand which Markdown features result in interpolation?

[ChristianMurphy]

Code will never interpolate. Inlines (strong, emphasis, strike) usually will.