Break line is necessary for using Katex with MDX component. ( gatsby-plugin-mdx )

[mathmathniconico]

Want to make a component like theorem environment of latex

I tried to show katex math-expression in MDX components and finally did it.
But, as follows, a break line is needed when writing .mdx files.
I think it's not readable.

And also, in the result, "Theorem children" has strange margins between <div>.
I can fix it by adding styles like { margin: "-1em 0em" }, but I don't like it.

How to fix these?

theorem.js

export default function Theorem(props) {
    return (
        <div className="theorem" style={{ background: "yellow" }}>
            <div style={{ background: "grey" }}>{props.title}</div>
            <div style={{ background: "green" }}>{props.children}</div>
            <div style={{ background: "grey" }}>div 1</div>
            <div style={{ background: "green" }}>div 2</div>
        </div>
    );
}

mdxtest.mdx

<Theorem title="Proposition">

This is a test for $\KaTeX$ in MDX component. If $\zeta( s )$ is Riemann zeta function, 
$$
\zeta(2)=\sum_{n=1}^{\infty}\frac{1}{n^{2}}=\frac{\pi^{2}}{6}.
$$
</Theorem>

A break line is needed between <Theorem> and "This is...".

result

Proposition (grey back)
(yellow)
This is ...(green)
(equation, green)
(yellow)
div 1(grey)
div 2(green)

[freiksenet]

Thank you for your report! CC @johno

[johno]

Hey @mathmathniconico,

The empty line is necessary and is part of the commonmark specification in order to open up Markdown parsing after an opening HTML/JSX tag.

The margins are likely due to styling based on paragraph tags since the Markdown inside Theorem will be parsed as a paragraph. In order to remove the margins you could add scoped styling to the Theorem component that would remove margins in a paragraph.

There's also a related MDX RFC that might be worth checking out if you want to read more into this.

Hope this helps! Let me know if you have any other questions.

[mathmathniconico]

Thanks a lot!
Actually, without MDX, I couldn't make the Theorem as above.
With it, I can start making my math-site.

I should post this in mdx-js/mdx, sorry.