reveal.js markdown with react don't work

[hms181231]

[mozgbrasil]

Hello good afternoon

I'm having trouble integrating the library with React, can you help me please

Following is an example where we see that the slide is not showing

https://codesandbox.io/s/4rxkmr7k3x

[achhranitesh]

@mozgbrasil : Did you get any solution on your problem

[Gone321]

Thank you for trying

[aditya-m-shah]

Hi did you get a solution to this issue? I am having the same issue and would like to know.

[SumukhJadhav]

Same issue

[noah79]

Exact same issue.

[starInEcust]

Exact same issue.

[hakimel]

I'm having trouble integrating the library with React, can you help me please

Following is an example where we see that the slide is not showing

https://codesandbox.io/s/4rxkmr7k3x

The issue in this example is that the DOM element containing reveal.js doesn't have any height. This makes reveal.js try to scale content to fit within an impossibly small size leading to nothing being visible.

Here's a forked example that works. All I added was an inline height style: https://codesandbox.io/s/https-github-com-hakimel-reveal-js-issues-2267-forked-3mgi24?file=/src/index.js:374-437

Is this the issue everyone has run into? If it's a common problem we should find a way to address it in the framework.

[salvaft]

I am not sure if it is the same issue but the issue title is exactly about that.

Here you can find a minimal reproducible issue when trying to render slides using markdown in react.

https://stackblitz.com/edit/vitejs-vite-ckayd2?file=src%2FApp.jsx

It also happens locally. A <code> fragment is rendered with HTML from the index.html instead of the string to be parsed as markdown.

Thanks in advance

[Michael-py001]

I am not sure if it is the same issue but the issue title is exactly about that.

Here you can find a minimal reproducible issue when trying to render slides using markdown in react.

https://stackblitz.com/edit/vitejs-vite-ckayd2?file=src%2FApp.jsx

It also happens locally. A <code> fragment is rendered with HTML from the index.html instead of the string to be parsed as markdown.

Thanks in advance

@SFToro Hi! Did you get any solution on this problem? It seem just happen in react.

[salvaft]

I am not sure if it is the same issue but the issue title is exactly about that. Here you can find a minimal reproducible issue when trying to render slides using markdown in react. https://stackblitz.com/edit/vitejs-vite-ckayd2?file=src%2FApp.jsx It also happens locally. A <code> fragment is rendered with HTML from the index.html instead of the string to be parsed as markdown. Thanks in advance

@SFToro Hi! Did you get any solution on this problem? It seem just happen in react.

@Michael-py001 I ended up using the external directive and using .md files.

Using vite i can "import" the md files.

// [...]
import performance from "../../md/performance.md";
import Md from "../../../src/components/markdown.jsx";
// [...]
 <section
      data-auto-animate-id={id}
      data-auto-animate={animate || null}
      data-auto-animate-restart={restart || null}
    >
<Md name={performance} external />
</section>

function markdown({ external, children, name }) {
  if (external) {
    return <section data-markdown={name} />;
  } else {
    return (
      <section data-markdown>
        <div data-template>{children}</div>
      </section>
    );
  }
}

export default markdown;

[dmenezesgabriel]

Adding empty quotes as value on data-markdown attribute works here with React.

  <section data-markdown="">
    <script type="text/template">
      {`
        # Hello
        ---
        ## World
        `}
    </script>
  </section>

[ellis]

Adding empty quotes as value on data-markdown attribute works here with React.

Thanks @dmenezesgabriel, that partially works for me too. But most formatting is still messed up. My first guess is that it's not properly processing new-lines for some reason. Maybe React isn't passing them correctly to the plugin...