由于与 Bulma 冲突，PrismJS 语法高亮被破坏答案

【问题标题】：PrismJS syntax highlighting is broken due to conflicts with Bulma由于与 Bulma 冲突，PrismJS 语法高亮被破坏
【发布时间】：2021-09-23 11:09:34
【问题描述】：

PrismJS 语法高亮在与 Bulma 一起使用时被破坏。

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

有什么解决办法吗？

【问题讨论】：

标签： syntax-highlighting bulma prismjs

【解决方案1】：

至少有 2 种解决方法。

解决方法 #1

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

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

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

解决方法 #2

使用Custom Class Prism plugin。

它允许为所有 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 文件，然后自己托管。

【讨论】：