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