html - 如何关闭 PrismJS CSS 主题中的文本阴影？

Question

我正在尝试使用 Prism.js 在 Gatsby 中格式化代码块，但是我导入的内置 CSS 添加了一个文本阴影，使它看起来很糟糕：

当我在 Chrome DevTools 中关闭文本阴影时，它看起来很棒：

但是，我无法弄清楚如何在代码中执行此操作。

代码块从内置的 prism.css 文件继承 text-shadow CSS，该文件按如下方式导入：

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

当我尝试使用内联样式时，它会被 prism.css 覆盖。如何删除此文本阴影？

Answer 1

CSS 按照导入的顺序进行评估，因此在同一个选择器上添加您自己的 CSS 并在 Prism CSS 文件之后导入它应该覆盖您不想要的 Prism CSS。

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

或者

.token { 
    text-shadow: none;
}