syntax-highlighting - 由于与 Bulma 冲突，PrismJS 语法高亮被破坏

Question

与 Bulma 一起使用时，PrismJS 语法突出显示被破坏。

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

有什么解决方法吗？

Answer 1

至少有 2 种解决方法。

解决方法 #1

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

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

只需指定您选择的 PrismJS 主题中使用的正确颜色。

解决方法 #2

使用自定义类棱镜插件。

它允许为所有 Prism 类添加前缀（例如，带有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

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

...    

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

...

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