Can JavaScript variables be used for dynamic MDX headings, in Docusaurus?

Question

Question

Suppose I have a string variable, e.g. const variable="foo";

Is there a way to create dynamic headings in Docusaurus, by using MD syntax. For example something like:

# Heading {variable}

Problem

For a variable: const variable="foo";

Tried:

## Heading {variable}

Expected to get a heading like:

Heading foo

Got instead:

Heading {variable}

Description

There is a use case that I need to create a set of headings based on some JS strings. Trying out the above does not work because it appears that everything after a # is used in the produced heading literally - including the curly braces and the variable name - thus, the value of the str variable is not used.

I've managed to make this work by going the React-way and using the <Heading/> component, defined in @theme/Heading. But there are certain caveats to these:

• Level of heading(indentation) has to be explicitly defined for each <Heading> component.
• Slugified heading id must be manually computed
• Headings rendered this way feel appear to be styled smaller than the ones that would be rendered using MD. For example <Heading as={'h2'} id={'a-heading'}>A heading</Heading> will be smaller from the equivalent ## A heading