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:

Code:

                                            
<pre>
    <code class="language-css">
        p {
            color: #1abc9c
        }
    </code>
</pre>
                                            
                                        

Use the following code to use HTML syntax highlighter.

Usage:

                                                
<pre>
    <code class="language-markup">
        HTML CODE ...
    </code>
</pre>
                                                
                                            

Example:

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

Example:

                                            
a:active{
    color:#1abc9c;
}
p{
    font-size:13px;
}
.btn-primary{
    color: #1abc9c;
    background-color: #fff;
}
.label-primary {
    background-color: #1abc9c;
}
.badge-primary {
    background-color: #1abc9c;
}
.bg-primary {
    background-color: #1abc9c !important;
    color: #fff;
}
.panel-primary {
    border-color: #1abc9c;
}
                                            
                                        

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.

Usage:

                                            
<pre class="line-numbers">
    <code class="language-css">
        p {
            color: red;
        }

    </code>
</pre>
                                            
                                        

Example:

                                            
(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:

1. A single number refers to the line with that number
2. Ranges are denoted by two numbers, separated with a hyphen (-)
3. Multiple line numbers or ranges are separated by commas.
4. Whitespace is allowed anywhere and will be stripped off.

Usage:

                                            
<pre data-line="2,4, 8-10">
    <code class="language-css">
        p {
            color: red
        }
    </code>
</pre>
                                            
                                        

Example:

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