You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 {publicstaticvoidmain(){}}
```
</SomeComponent>
But this produces a parse error:
<SomeComponent>
```
public class Test {publicstaticvoidmain(){}}
```
</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 {publicstaticvoidmain(){}}
```</SomeComponent>
Or even:
<SomeComponentsource=```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:
<Examplereference={`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.
The text was updated successfully, but these errors were encountered:
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
Steps to reproduce
This works:
But this produces a parse error:
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:
Or even:
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:
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.
The text was updated successfully, but these errors were encountered: