Artifacts like rendering

[achristie]

Hello,

I'm curious on the best approach for a syntax like:

<CustomComponent ticker="AAPL">
# This will show you how to get apple stock price
import get_stock_price from yahoo

get_stock_price(ticker)
</CustomComponent>

just using rehypeRaw and adding the mapping component does work, except, the children of the custom component are also transformed from markdown to html. so the # Comment is transformed into <h1>Comment</h1>.

I considered using toMdast and then toMarkdown to get the original string back, but it adds some escape characters and odd line break behavior. In addition to seeming like crazy approach.

What i'm wondering if can i just indicate somehow that whatever is inside that HTML should not get transformed by remark/react-markdown? just like the code block does.

Of course i could use the code block syntax for this purpose but i'd rather keep this separate from that as I use it already.

[ChristianMurphy]

Hey @achristie! 👋

It looks like you want JSX with Markdown.
That would be MDX https://mdxjs.com/

And likely something to shape the output to guarantee it is valid like
https://github.com/guidance-ai/guidance or https://github.com/outlines-dev/outlines

[achristie]

Thanks for the quick reply @ChristianMurphy .

is it as simple as:

<ReactMarkdown remarkPlugins={[remarkMdx]} components={components}>
{mdx}
</ReactMarkdown>

where components is just the components i wish to support?

[ChristianMurphy]

Using MDX instead of react markdown.

Using evaluate https://mdxjs.com/packages/mdx/#evaluatefile-options has a similar ish API and could be wrapped as a component if wanted.

[achristie]

Thanks @ChristianMurphy . Will give this a shot tomorrow or friday.

[achristie]

so i did play around with this a bit, but i run into the same issue. Any children of the JSX are also getting transformed from markdown into html tags.

for example

<MyComponent>

# This is a comment
df = pd.DataFrame()

</MyComponent>

puts This is a comment inside of an <h1> tag.

So I think i could either

• preprocess the content to extract whats inside the tags out and handle them outside of remark.
• use code tags, which do not transform the children.
• write a plugin which will prevent transformation of content within my custom tag.

[ChristianMurphy]

I'd recommend the second

use code tags, which do not transform the children

Then you have the author/LLM give more context on what's inside the artifacts.