spectacle-code-slide not highlighting code lines

Question

Using the current spectacle boilerplate (5.2.2) with spectacle-code-slide, everything works fine until navigating the code inside the CodeSlide element.

<CodeSlide
        transition={[]}
        lang="js"
        bgColor="secondary"
        code={require("raw-loader!../assets/code.example")}
        ranges={[
          { loc: [0, 270], title: "Walking through some code" },
          { loc: [0, 1], title: "The Beginning" },
          { loc: [1, 2] },
          { loc: [1, 2], note: "Heres a note!" },
          { loc: [2, 3] },
          { loc: [8, 10] },
        ]}/>

Here is the result I'm getting

Looking at the tutorial from the github of spectacle-code-slide it seems like this is the way to do it (unless I'm making a mistake somewhere) and the way to make Prism (which is used by CodeSlide to do the highlighting) understand the target language is by setting the lang="" property.

Here is the question: has anyone manageg to make the CodeSlide component work properly with the current version of spectacle boilerplate ?

same issue unfortunately. I can get the code showing and highlighted but it doesn't transition to the lines defined in the ranges. — bamdan, Oct 17 '19 at 06:11

score 0 · Answer 1 · answered Feb 19 '19 at 06:48

0

Not sure if you figured out how to fix this or not though you need to include some kind of CSS from Prism. This is the link for the themes. If you add a theme from here to your code, it should work fine. Feel free to add in a different background color though as needed.

answered Feb 19 '19 at 06:48

karrde00

67
4

I've included the css and this highlights the code correctly but my issue may be different as I can't transition between the blocks of code defined in the presentation. – bamdan Oct 17 '19 at 06:12

spectacle-code-slide not highlighting code lines

1 Answers1