2

I'm trying to format a code block in Gatsby with Prism.js, but the built-in CSS that I import adds a text-shadow that makes it look awful:

enter image description here

When I toggle off the text-shadow in Chrome DevTools, it looks great:

enter image description here

However, I can't figure out how to do this in the code.

The code block is inheriting the text-shadow CSS from a built-in prism.css file that got imported as follows:

import theme from "prism-react-renderer/themes/vsDark"

enter image description here

When I try using inline styles it gets overridden by the prism.css. How can I remove this text-shadow?

James Shapiro
  • 4,805
  • 3
  • 31
  • 46
  • 1
    You could add your own CSS on the same selector in which you remove the text shadow and import it after the prism one. – Liftoff Dec 01 '20 at 22:36
  • Hey David, thanks! Simply adding ".token { text-shadow: none; } to my global.css file completely resolved the issue. – James Shapiro Dec 01 '20 at 23:32

1 Answers1

2

CSS is evaluated in the order it's imported, so adding your own CSS on the same selector and importing it after the Prism CSS file should override the Prism CSS you don't want.

code[class*="language-"],
pre[class*="language-"] {
  text-shadow: none;
}

or

.token { 
    text-shadow: none;
}
James Shapiro
  • 4,805
  • 3
  • 31
  • 46
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • This will leave some text dark on a dark background. There's probably a way to tell PrismJS to use colors that work without the textshadow but i found it easier to switch to https://highlightjs.org/ than try to figure out how. – mlncn Apr 13 '22 at 20:13