- ##### Basic Components

- All
- Alert
- Button
- Badges
- Breadcrumb
- Cards
- Color
- Collapse
- Carousel
- Dropdowns
- Offcanvas
- Pagination
- Progress
- List group
- Modal
- Spinner
- Tabs & pills
- Tooltip
- Toasts
- Typography
- Other

- ##### Advance Components

- Sweet alert
- Datepicker
- Lightbox
- Modal
- Notification
- Rangeslider
- Slider
- Syntax Highlighter
- Tour
- Tree view

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.

Reference

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

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

- ###### Accent color

  Choose your primary theme color

- ###### Sidebar Caption

  Sidebar Caption Hide/Show

- ###### Theme Layout

  LTR/RTL

- ###### Layout Width

  Choose Full or Container Layout