Prism 是被广泛使用的代码高亮插件, 在 Bootstrap 4 之前的版本中, Bootstrap 和 Prism 可以和谐共处, 但升级至 Bootstrap 4 后, 它们之间会产生一点小小的样式冲突, 一些 token 会变得非常小, 因为 Bootstrap 加入了新的 class: .tag, 这是已经被 Prism 占用的 class, 造成了 Prism token 的字体变小 (75%), 还引起其他的一些样式变化.

解决的方法非常直观, 因为 Prism 的 .tag 都包含在 pre 和 code 标签当中, 因此可以给 Prism 的 .tag 指定特定的样式, 既不影响 Bootstrap 框架样式, 也使 Prism 可以正常显示.

Bootstrap 给 .tag 指定的样式如下:

.tag {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

由 Chrome 查询 Prism 正常显示的 token 对应样式应该如下:

.tag {
    display: inline;
    padding: 0;
    font-size: inherit;
    font-weight: normal;
    line-height: 1.5;
    color: #fff; /* Higher priority than Bootstrap*/
    text-align: left; /*Higher priority than Bootstrap*/
    white-space: pre;
    vertical-align: baseline; /*Same as Bootstrap*/
    border-radius: 0;
}

可以看到有部分属性与 Bootstrap 样式相同, 另有部分属性是会覆盖 Bootstrap 的属性值的(已经在上面注释中注明), 要完全覆盖 Bootstrap 的样式, 要添加的 CSS 如下:

pre code .tag {
    display: inline;
    padding: 0;
    font-size: inherit;
    font-weight: normal;
    line-height: 1.5;
    white-space: pre;
    border-radius: 0;
}

虽然以上 CSS 中, 有一部分去掉也不影响显示效果, 但出于保险起见, 还是应该都指定. 把以上 CSS 放进自定义的 CSS 文件中, 并后于 bootstrap.css 引入, 即可覆盖 Bootstrap 样式了.

这位德国老兄也遇到了一样的问题, 并采用了类似的解决方案, 可以提供参考 CSS conflict between Bootstrap 4 and Prism - Gordon Lesti