Adding revealjs to gatsby #27567

loctran016 · 2020-10-20T11:50:05Z

loctran016
Oct 20, 2020

Excuse me, guy. I'm using reflexjs and I want to add reveal.js to my site so I've tried to created a mdx in the block like this:

<React.Fragment>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@latest/dist/theme/dark.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/highlight/monokai.css"></link>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/zoom/zoom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/search/search.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/notes/notes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/math/math.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/highlight/highlight.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@latest/plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    mouseWheel: {props.mouseWhell},
    transition: '{props.transition}',
    transitionSpeed: '{props.transitionSpeed}',
    parallaxBackgroundImage: '{props.parallaxBackgroundImage}',
    parallaxBackgroundSize: '{props.parallaxBackgroundSize}',
    parallaxBackgroundHorizontal: '{props.parallaxBackgroundHorizontal}',
    parallaxBackgroundVertical: '{props.parallaxBackgroundVertical}',
    autoSlide: {props.autoSlide},
    loop: {props.loop},
    controlsLayout: '{props.controlsLayout}', // Determines where controls appear, "edges" or "bottom-right"
    controlsBackArrows: '{props.controlsBackArrows}',
    progress: {props.progress},
    showNotes: {props.showNotes},
    autoPlayMedia: {props.autoPlayMedia},
    backgroundTransition: '{props.backgroundTransition}',
    markdown: {
      smartypants= true
    },
    plugins: [ RevealMarkdown, RevealHighlight, RevealNotes RevealSearch, RevealNotes, RevealZoom, RevealMath]
  })
  </script></body>
  <React.Fragment>