[docs] Markdown needs to be escaped in jsx

[sneakers-the-rat]

Prerequisites

Feel free to delete this section if you have checked off all of the following.

• [x] I've searched open issues to make sure I'm not opening a duplicate issue
• [x] I have read through the docs before asking a question
• [x] I am using the latest version of Spectacle

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle)

9.3.0

What version of React are you using? (can be found by running npm list react)

18.2.0

What browser are you using?

firefox (not relevant)

What machine are you on?

mac (not relevant)

Describe the Problem

Any text inside the Markdown component when used with jsx (ie. if slides are declared in multiple files and imported) will have its newlines killed during parsing. Since markdown is a newline/whitespace sensitive markup syntax, this kills the markdown.

eg. if i do this:

export const MySlide = (
<Markdown>
# Title

- List
- Items
</Markdown>
)

will be rendered as

<h1>Title - List -Items</h1>

This happens at the time of declaration as far as I can tell, as if I put a console.log just after declaring the variable it already shows its children as a collapsed string without newlines.

Solution

To make it work, I needed to wrap the inside of a markdown component like this:

export const MySlide = (
<Markdown>
{`
# Title

- List
- Items
`}
</Markdown>
)

Which properly preserves the newlines. This should be added to the docs!!!

Additional Information

I'm using

• webpack (5.74.0)
• @babel/preset-react (7.18.6)

to parse the jsx