CSS conflict between Bootstrap 4 and Prism

Bootstrap 4.0.0-alpha.5 is styling the class .tag and this leads to a CSS conflict with the Prism syntax highlighter. Here my fix to solve this conflict.

Highlight HTML code

Let us assume we want to show the following HTML code with Prism.

<h1>Hello Bootstrap</h1>

We can do that with the following HTML code.

<pre><code class="language-html">&lt;h1&gt;Hello Bootstrap&lt;&#x2F;h1&gt;</code></pre>

CSS conflict class tag

Unfortunately is Bootstrap styling the class .tag the following way in version 4.

.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;
}

Prism is also using the class .tag and the resulting highlighted HTML looks like this. All tags are too small and bold.

<h1>Hello Bootstrap</h1>

CSS bugfix for class tag

My bugfix for this CSS conflict is the following CSS code loaded after Bootstrap CSS.

.token.tag {
    display: inline;
    padding: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    vertical-align: inherit;
    border-radius: inherit;
    font-weight: inherit;
    white-space: inherit;
}
Next Previous