Code line highlighting has low opacity

[BenocxX]

I tried following this guide to show a code block with highlighted lines but the opacity is very low for unknown reasons... The problem only appears when using React. When I make a simple html file with RevealJS it's working as expected.

Here's what it should look like:

Here's what it looks like (the colors are not the same because I use a different theme. Switching to other theme did not fix the issue):

And here's what it looks like when I disable line highlighting:

I tried to inspect the lines to see if there was a css property lowering the opacity but I didn't find any. Mind you, I'm not used to HighlightJS so I may have missed something.

Here's the full code:

import { RevealSlides } from "react-reveal-slides";

// Make sure reveal.js is installed with npm for the following imports to work
// Plugins
import RevealNotes from "reveal.js/plugin/notes/notes";
import RevealZoom from "reveal.js/plugin/zoom/zoom";
import RevealHighlight from "reveal.js/plugin/highlight/highlight";

import "reveal.js/dist/theme/black.css";
import "reveal.js/plugin/highlight/monokai.css";

function App() {
  return (
    <div
      style={{
        height: "100vh",
        width: "100vw",
      }}
    >
      <RevealSlides
        controls={true}
        plugins={[RevealZoom, RevealNotes, RevealHighlight]}
        onStateChange={(state) => console.log(state)}
      >
        <section>
          <pre>
            <code data-trim data-noescape data-line-numbers="3,8-10">
              {`<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
</table>`}
            </code>
          </pre>
        </section>
      </RevealSlides>
    </div>
  );
}

export default App;

Thanks for the help!

Unrelated: Why's there a 1 to the left of the line numbers column? I can open an other issue if you'd prefer..?

[bouzidanas]

Might be an issue with the initialization of the highlighter plugin. I will look into it later today.

Also, there looks to be some sort of nesting issue.

The RevealSlides component doesnt do much beside being a react wrapper. It does do some things to make sure initialization occurs once, theme is loaded, and user is able to reconfigure without recreating the component. There was an issue with initialization of the highlighter plugin in the past which required manual initialization. If that issue has been resolved, then the reinitialization might be causing the problem. I will investigate and let you know.

These things help make this package better for others so feel free to make create more issues if you come accross any.

[BenocxX]

Wonderful, I'll let you know if I find more!

I'll be using this package a lot in the near future, I might try to dive into the code and become a contributor if I find the time to do so :)

[bouzidanas]

That would be awesome! Some of my other projects benefited greatly from ideas and fixes from contributors.

[bouzidanas]

Good news! I have narrowed down to the issue and my intuition was close. The highlighter plugin is being initialized twice, but not because of the previous fix I implemented.

Still working on a solution....

[bouzidanas]

Problem is fixed and I am currently testing for any other issues. I plan to write some vitest tests to make sure other things havnt gotten broken.

If you want to try out the fix, you can do so by uninstalling react-reveal-slides:

npm uninstall react-reveal-slides

and then installing from the fix-them-loading branch:

npm install bouzidanas/react-reveal-slides#fix-theme-loading

Turns out my original theory was spot on but there were some other things that obfuscated the problem.

[BenocxX]

Woaw awesome! I'll try it out in a few days! Thanks a lot for you work :)

[BenocxX]

It's working as expected! Thanks for the fix!