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.
4.0.0-alpha.6
.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"><h1>Hello Bootstrap</h1></code></pre>
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>
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;
}