روش توصیه شده برای علامت گذاری یک بلوک کد (هم برای معناشناسی و هم برای Prism) یک است <pre> عنصر با یک عنصر <code> inside, like so:

کد:

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

از کد زیر برای استفاده از برجسته کننده نحو HTML استفاده کنید.

استفاده:

                                                
<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 از کد زیر استفاده کنید.

مثال:

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

شماره خط در ابتدای خطوط کد.

بدیهی است که این قرار است فقط برای بلوک های کد کار کند (<pre><code>) و نه برای کدهای درون خطی. شماره خطوط کلاس را به دلخواه خود اضافه کنید <pre> و پلاگین line-numbers مراقبت خواهد کرد.

اختیاری: می توانید مشخصه data-start (Number) را روی آن مشخص کنید <pre>عنصر شمارنده خط را جابجا می کند.

استفاده:

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

    </code>
</pre>
                                            
                                        

Example:

                                            
(function() {
    if (typeof self==='undefined' || !self.Prism || !self.document) {
        return;
    }
});
                                            
                                        

خطوط خاص و/یا محدوده خطوط را برجسته می کند.

شما خطوطی را مشخص می‌کنید که از طریق ویژگی خط داده روی آن برجسته شوند <pre>عنصر، در قالب ساده زیر:

1. یک عدد به خطی با آن عدد اشاره دارد
2. محدوده ها با دو عدد مشخص می شوند که با خط فاصله (-) از هم جدا می شوند.
3. تعداد خطوط یا محدوده های متعدد با کاما از هم جدا می شوند.
4. فضای خالی در هر جایی مجاز است و حذف خواهد شد.

استفاده:

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