Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

MultiCodeBlock breaks MDX page #149

Open
wojwoj opened this issue Sep 18, 2020 · 4 comments
Open

MultiCodeBlock breaks MDX page #149

wojwoj opened this issue Sep 18, 2020 · 4 comments

Comments

@wojwoj
Copy link

wojwoj commented Sep 18, 2020

Hi,

I have a problem with getting to work MultiCodeBlock inside MDX page.

This the content of mdx page: [ignore txt extension, I just could not upload mdx file :(]
dummy.txt

And then i get following error when opening localhost:8000

Error: MultiCodeBlock(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

I use [email protected].

Could you please give me some advice how to solve it?

//BR
Wojtek

@sekoyo
Copy link

sekoyo commented Oct 11, 2020

Maybe you had the same problem - seems very fragile, it broke for me if I didn't have line breaks before and after the content inside of it

@iberflow
Copy link

iberflow commented Oct 14, 2020

I'm not 100% sure if it's related, but none of the code blocks render for me. Wrapping things in ticks "`" or "```" renders empty and I think that's why it's not working with MultiCodeBlock component.

I'm trying to investigate, but maybe the maintainers would know what's up off the top of their heads. I'm new to Gatsby:)

@iberflow
Copy link

I've confirmed that code highlighting does not work in mdx files only, md files seem to be working fine.

@trevorblades
Copy link
Contributor

@dominictobias you're right, in order to render Markdown within a JSX component, you need to surround the markdown with extra spaces above and below. Something like this should work as expected:

<MultiCodeBlock>

```js
const foo = 'bar';
```

```python
foo = "bar"
```

</MultiCodeBlock>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants