Variable replacement in Expressive Code blocks in MDX

[oprypkhantc]

What version of starlight are you using?

0.29.2

What is your idea?

Hey.

Currently, variables are not being replaced in Expressive Code's code blocks in MDX:

\`\`\`shell
curl '{import.meta.env.API_URL}/graphql' \
  -H 'content-type: application/json' \
  -H 'version: v1' \
  --data-raw '{"query":"{ me { id } }"}'
\`\`\`

The {import.meta.env.API_URL} stays as is, even though it works in other Markdown elements. There is a workaround, but it involves a lot of extra movements:

• importing and using <Code> component
• using JS syntax to create a string to pass into <Code> component
• moving EC config to ec.config.mjs

import { Code } from '@astrojs/starlight/components'

<Code code={`curl '{import.meta.env.API_URL}/graphql' \ \n`.replace('{import.meta.env.API_URL}', import.meta.env.API_URL) +
`  -H 'content-type: application/json' \ \n` +
`  -H 'version: v1' \ \n` +
`  --data-raw '{"query":"{ me { id } }"}'`} lang="shell"></Code>

This both looks and feels wrong :)

Why is this feature necessary?

To greatly improve developer experience when working with code blocks that contain env variables.

One thing I'm not sure is whether this belongs to this repository or astro-expressive-code. I imagine this should be implemented as a plugin for astro-expressive-code? It also seems that blindly replacing everything in {} brackets would break a lot of things, so I guess this should either be an opt-in plugin, or be explicit:

\`\`\`shell API_URL={import.meta.env.API_URL}
curl '{API_URL}/graphql' \
  -H 'content-type: application/json' \
  -H 'version: v1' \
  --data-raw '{"query":"{ me { id } }"}'
\`\`\`

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Hey @oprypkhantc! I think this may just be a limitation of MDX? AFAIK it doesn’t support variables in code blocks so it is not a restriction specific to Expressive Code (or Astro or Starlight)?

[oprypkhantc]

Oh, you're correct. Never thought of that 🙃 Found a few discussions about that in MDX repo, it doesn't seem like that's going to happen, so I'll close this discussion. Thanks :)

By the way, for anyone stumbling upon this, my workaround is a bit overcomplicated and can be boiled down to this:

<Code code={
	`curl '${import.meta.env.API_URL}/graphql' \\
	  -H 'content-type: application/json' \\
	  --data-raw '{"query":"{ me { id } }"}'`
} lang="shell"></Code>