Description
Subject of the issue
Extra new lines seem to be required to include fenced code blocks inside React components using MDX. This would technically violate the CommonMark spec, although that spec obviously doesn't define how Markdown and React components should mix 😄.
Your environment
- Mac OS 18.6.0
- Latest my-mdx-starter project created using Gatsby
- See above. Chrome browser.
Steps to reproduce
This works:
<SomeComponent>
```
public class Test {
public static void main() {
}
}
```
</SomeComponent>But this produces a parse error:
<SomeComponent>
```
public class Test {
public static void main() {
}
}
```
</SomeComponent>Expected behaviour
MDX should parse the fenced code block without the extra whitespace. While this seems like a fairly small issue, fenced code blocks already introduce extra whitespace, and the additional blank line starts to lose some of the terseness benefits we were hoping to gain through MDX.
It would be even better if something like this would work:
<SomeComponent>```
public class Test {
public static void main() {
}
}
```</SomeComponent>Or even:
<SomeComponent source=```
public class Test {
public static void main() {
}
}
```/>Actual behaviour
A parse error.
Additional information
We're trying to use MDX for examples that need to render 2 or sometimes 3 separate code snippets. We've tried a variety of different ways to do this, but our attempts using JS template literals are bumping up against this previous issue which still seems unresolved.
For example, this causes a parsing error due to the blank line:
<Example reference={`
public class Test {
public static void main() {
}
}
`} />Either this or the inline fenced blocks shown above would probably be our preferred approach if it did work. The above is an attempt at a workaround.