PrismJS与Bulma共用时语法高亮失效的原因及解决方案咨询

二者同时定义了number与tag类，样式互相覆盖导致语法高亮失效，问题表现如下：

可行解决方案 #

• 方案1：修改PrismJS类名前缀
  从根源避免类名重复，在引入PrismJS资源前先声明全局配置修改类前缀：

  window.Prism = window.Prism || {};
  Prism.classPrefix = 'prism-';
  

  同步修改Prism主题CSS文件，将所有.number、.tag等语法类选择器前加上prism-前缀，或在Prism官方自定义构建时直接指定类前缀，自动生成对应CSS与JS文件。

• 方案2：提升Prism样式优先级
  给所有Prism语法规则加上父级限定选择器，提高权重覆盖Bulma的默认样式：

  /* 仅需在原有Prism样式的选择器前加上父级限定即可 */
  pre[class*="language-"] .tag {
    color: #905; /* Prism默认tag颜色示例 */
  }
  pre[class*="language-"] .number {
    color: #905; /* Prism默认number颜色示例 */
  }
  

• 方案3：排除Bulma冲突组件
  若项目中未使用Bulma的tag、number组件，可自定义构建Bulma时排除对应模块。使用Sass版本的Bulma时，在导入Bulma前设置变量即可：

  $bulma-tag: false;
  $bulma-number: false;
  @import "bulma/bulma";
  

• 方案4：重置代码块内冲突类样式
  针对Prism代码块内的冲突类，直接清空Bulma施加的样式，再还原Prism默认效果：

  pre[class*="language-"] .tag,
  pre[class*="language-"] .number {
    all: unset;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    /* 补充对应Prism语法高亮的颜色、字体样式即可 */
  }
  

内容的提问来源于stack exchange，提问作者Eugene Khyst