PrismJS语法突出显示因与Bulma冲突而中断

Question

当与Bulma一起使用时，PrismJS语法突出显示会中断。

PrismJS和Bulma都使用number和tag类。因此，PrismJS和布尔马之间存在冲突。

​

​

有什么变通方法吗？

Answer 1

至少有两种变通方法。

解决方法#1

与Bulma不同，PrismJS将token类添加到所有突出显示的元素中，包括number和tag。它允许我们编写更具体的CSS规则，并解决与Bulma的冲突：

.token.number,
.token.tag {
  all: inherit;
  color: #905;
}

只需指定在所选PrismJS主题中使用的正确颜色即可。

解决方法#2

使用Custom Class Prism plugin。

它允许为所有棱镜类添加前缀(例如，使用prism-前缀)。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/custom-class/prism-custom-class.min.js"></script>
<script>
  Prism.plugins.customClass.prefix('prism-');
</script>

因此，number和tag变成了prism-number和prism-tag，因此与Bulma的冲突将得到解决。

但您还必须在Prism CSS样式表中手动为类添加前缀，例如：

...    

.prism-token.prism-class-name,
.prism-token.prism-function {
    color: #dd4a68
}

...

我不喜欢这种方法，因为需要手动编辑Prism主题CSS文件，然后自己托管它。