Expression resulting in markdown

[glitteringkatie]

Hi! We are working on migrating from Asciidoc to MDX. A feature our documentation writers use heavily is rendering conditional content (think: a singular paragraph on a page that changes depending on the version selected).

Very simply, we want something like { 1 < 2 ? '**yes**' : '_no_' } to render "yes" but it really renders "**yes**".

Do you have any suggestions for supporting this? We could definitely create some sort of conditional component to utilize the markdown rendering but it seemed like a reasonable enough use case that I figured the folks over in the MDX world might already have a solution or an idea for us to explore.

Thank you!

cc @scottybollinger

[wooorm]

Heyyy ✨ Katie! :)

P.S. you can now use vscode-mdx to highlight MDX https://github.com/mdx-js/mdx-analyzer/releases/tag/v1.3.0!

Simplest idea in my mind is: use JSX in there? { 1 < 2 ? <strong>yes</strong> : <em>no</em> }

Alternate idea is like how you would do this in a component, just thinking from the component: you filter props.children somehow.

So on the input side, you write something like this:

<MyFilteringComponent>
  <div v={1}>
    **Yep**
  </div>
  <div v={2}>
    _nope!_
  </div>
</MyFilteringComponent>

Now in MyFilteringComponent you’d do some filtering on props.children. I forgot exactly how react elements look, but you can access something like child.props.v or something to get the value, but your fields may vary! And then a <>{props.children.filter(myFilteringFunction)}</> should do the trick!

We could definitely create some sort of conditional component

Yep!
My above pseudo code more absrtracted, I believe I’ve seen similar <If> ideas floating around on Twitter. So maybe some component like this already exists?

[ChristianMurphy]

Heya @glitteringkatie and @scottybollinger! 👋

{ 1 < 2 ? '**yes**' : '_no_' } to render "yes" but it really renders "yes".

Right, in MDX when you enter a JSX {} expression, it will treat all the inner content as JS/JSX, not as MDX until it is closed.

A few options for mixing conditionals into content.

Create conditional tags

For example importing https://github.com/sindresorhus/react-extras#if

<If condition={1 < 2}>
  **yes**
</If>
<If condition={1 >= 2}>
  _no_
</If>

Use an MDX template literal

{ 1 < 2 ? mdx`**yes**` : mdx`_no_` }

This would require some additional wrapper code around MDX, see unifiedjs/unified#40 for inspiration.

Use JSX/HTML

{ 1 < 2 ? <strong>yes<strong> : <em>no</em> }

[glitteringkatie]

Shout out to you both for such speedy responses that are basically all on the same page. I'll see what our writers want as their experience and go from there. Thank you! Glad I wasn't missing anything blatantly obvious.