Code line highlighting has low opacity #7
Description
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..?