javascriptreactjsspectacle

spectacle-code-slide small height

I built a presentation slide with spectacle and I added spectacle-code-slide everything is working but the height of <CodeSlide> is really small. It's not fullscreen compare to this example

Anyone have this problem?

Snippet

 <Deck transition={["zoom", "slide"]} transitionDuration={500} theme={theme}>
    ....
    <CodeSlide
      lang="js"
      code={require("raw-loader!../assets/code")}
      ranges={[
        { loc: [0, 1], title: "Importing React" },
        { loc: [2, 30] }, //TodoList Component
        { loc: [4, 12], title: "Contructor Method" },
        { loc: [13, 25], title: "Render Method" },
        { loc: [14, 17] }, //Creating TodoItem by mapping through the list
        { loc: [18, 24] },
        { loc: [26, 29], title: "addEvent Method" },
        { loc: [31, 36], title: "TodoItem Component" },
        { loc: [37, 72] }, //NewTodoItem Component
        { loc: [39, 47] }, //Contructor Method
        { loc: [48, 51] }, //componentDidMount
        { loc: [52, 63] }, //render
        { loc: [64, 69] }, //onChange
        { loc: [70, 75] }, //onSubmit
        { loc: [77, 78], title: "Rendering component in the DOM" },
      ]}
    />
 </Deck>

EDIT: To anyone who is having issues remove all the transitions on your Deck component. Comments for help.

Solution

  • I am working on a presentation myself using this tool and was having this exact issue today. I played around with the slide properties trying to make it work and noticed some weird things going on with transitions.

    It is not documented anywhere but apparently for the CodeSlide to work the Deck container should have an empty array on its transition property.

    Hope this works for you.

    Edit: It also seems like the code slide itself won't work if it has any transitions. Not sure if this has been working this way or if it was broken by an updated depencency.