Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.
The recommended way to mark up a code block (both for semantics and for Prism) is a <pre>
element
with a element <code>
inside, like so:
<pre>
<code class="language-css">
p {
color: #7267EF
}
</code>
</pre>
Use the following code to use HTML syntax highlighter.
<pre>
<code class="language-markup">
HTML CODE ...
</code>
</pre>
<div class="card">
<div class="card-header">
<h5>Hello card</h5>
<span> lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
<div class="card-header-right">
<i class="icofont icofont-rounded-down"></i>
<i class="icofont icofont-refresh"></i>
<i class="icofont icofont-close-circled"></i>
</div>
</div>
<div class="card-body">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
</p>
</div>
</div>
Use the following code to use CSS syntax highlighter.
a:active{
color:#7267EF;
}
p{
font-size:13px;
}
.btn-primary{
color: #7267EF;
background-color: #fff;
}
.label-primary {
background-color: #7267EF;
}
.badge-primary {
background-color: #7267EF;
}
.bg-primary {
background-color: #7267EF !important;
color: #fff;
}
.panel-primary {
border-color: #7267EF;
}
Line number at the beginning of code lines.
Obviously, this is supposed to work only for code blocks (<pre><code>
) and not for inline
code. Add class line-numbers to your desired <pre>
and line-numbers plugin will take care.
Optional: You can specify the data-start (Number) attribute on the <pre>
element. It will shift
the line counter.
<pre class="line-numbers">
<code class="language-css">
p {
color: red;
}
</code>
</pre>
(function() {
if (typeof self==='undefined' || !self.Prism || !self.document) {
return;
}
});
Highlights specific lines and/or line ranges.
You specify the lines to be highlighted through the data-line attribute on the <pre>
element, in
the following simple format:
<pre data-line="2,4, 8-10">
<code class="language-css">
p {
color: red
}
</code>
</pre>
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em;
/* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-end: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}