Interpolate variables in the MDX

[apostololeg]

Thank you all for Docusaurus, it's really easy and understandable 🙌

💥 Proposal

Following the #395 (comment)
we are really need ability to interpolate variables in MDX markup of *.md files.

For example:

const data = "azaza";

// we wish this:
'''jsx
  const data = "{data}";
'''

// to become:
'''jsx
  const data = "azaza";
'''

[slorber]

MDX can already use variables in content: import the data and render it with a JSX node:

# title

some text

import data from "@site/static/data.json"

<span>Some data: {data.myData}</span> 

The only thing we propose in the referenced issue is to configure globally the "mdx scope" so that the data variable is available in all your docs without the need to import it.

---

If you want to use this data inside a md code block, it's a different story

You'd have to use some <code> jsx instead of ``` syntax, maybe something like this:

# title

some text

import data from "@site/static/data.json"

<code>{`const data = "${data.myData}"}</code> 

---

Now, if you want to add a custom syntax for placeholders/variables to reduce verbosity and simplify usage, the way to go is to build your own Remark plugin to pre-process the markdown docs and replace placeholders/variables with your values (provided as plugin options)

The Remark ecosystem may already have such a plugin, but I couldn't find a good one.

Maybe try this one: https://github.com/mrzmmr/remark-variables

If someone wants to build such a Remark plugin, I'd be happy to provide support and eventually add it to Docusaurus core if it makes sense. In my opinion, it must be a generic Remark plugin (that other frameworks could use as well) and it should not be developed and battle-tested in Docusaurus core.

Technically, you can pass remark plugins as plugin options, and Docusaurus isn't blocking you from implementing this feature yourself.

[derekm]

For variables in code blocks, see here: mdx-js/mdx#1095 (comment)

[JasonZhLiang]

@slorber do you have a code example of that remark plugin to substitute the placeholder in MD files?

[slorber]

No official example I actually tried to share but I guess this could be an example:
https://github.com/angeloashmore/gatsby-remark-find-replace/blob/master/src/index.js

(just found this with Google)

[JasonZhLiang]

@slorber thanks a lot, you save my day!