Explore Components

Syntax Highlighter

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.

Basic Usage

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>
                                            
                                        
HTML Markup

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>
    <div class="card-body">
        <p>
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
        </p>
    </div>
</div>
                                                
                                            
CSS Markup

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

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;
    }
});
                                            
                                        
Line Highlight

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;
}
                                            
                                        
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Sidebar Theme

    Choose Sidebar Theme

  • Header color

    Choose your Header theme color

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout