کاربرد پایه

ابتدا نیاز دارید تا فایل های prism.css و prism.js را در صفحه خود قرار دهید.

Prism تمام تلاش خود را برای تشویق به استفاده از شیوه های نویسندگی خوب انجام می دهد. بنابراین فقط با المان های <code>کار میکند، چرا که نمایش کد کد بدون استفاده از تگ <code> کار نادرستی است. برای راحتی کار شما Prism تعریف زبان را به صورت ارثی در نظر میگیرد. بنابراین اگر چند المان <code> زبان مشترکی دارند میتوانید کلاس language-xxxx را به والد مشترک ان ها اضافه کنید. به این طریق میتوانید یک زبان پیش فرض برای کل سند با افزودن کلاس language-xxxx به تگ <body> یا <html> تعریف کنید.

اگر میخواهید هایلایت کردن را برای یک المان <code> غیرفعال کنید که داخل یک المانی که برای آن زبان کد تعریف کرده اید قرار دارد، میتوانید کلاس language-none را به آن اضافه کنید (یا هر زبان ناموجود).

کد:

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

</code>
</pre>

خروجی

p {
    color: red
}

اگر از این الگو استفاده کنید تگ <pre> به صورت خودکار کلاس language-xxxx را می گیرد (اگر خودش آن را نداشته باشد) و به عنوان یک بلوک کد استایل دهی می شود.

مثال ها

کد HTML

از کد زیر برای هایلایت کردن کدهای HTML استفاده کنید

کاربرد:

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

مثال:

 <div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">
Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 </div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
Cras justo odio</li>
<li class="list-group-item">
Dapibus ac facilisis in</li>
<li class="list-group-item">
Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">
Card link</a>
<a href="#" class="card-link">
Another link</a>
</div>
</div>
کد CSS

از کد زیر برای هایلایت کردن کدهای CSS استفاده کنید.

کاربرد:

 <pre>
<code class="language-css">
CSS CODE ... </code>
</pre>

مثال:

 a:active {
    outline: 0;
}

a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

کد JS

از کد زیر برای هایلایت کردن کدهای JS استفاده کنید.

کاربرد:

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

مثال:

 init: function() {
    var scroll_theme=($('.main-menu').hasClass('menu-dark')) ? 'light': 'dark';
    this.obj=$(".main-menu-content").perfectScrollbar( {
        suppressScrollX: true, theme: scroll_theme
    }
    );
}

, update: function() {
    if (this.obj) {
        $(".main-menu-content").perfectScrollbar('update');
    }
}

, enable: function() {
    this.init();
}

, 

شماره خط ها

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

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

اختیاری: میتوانید صفت data-start (عدد) را به تگ <pre> اضافه کنید. این مقدار شمارنده خطوط را تغییر می دهد.

کاربرد:

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

</code>
</pre>

مثال:

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

());

هایلایت خط

خطوط یا محدوده ای از خطوط به خصوص را هایلایت کنید.

خطوط مورد نظر برای هایلایت شدن را توسط صفت data-line بر روی المان <pre> با فرمت ساده زیر مشخص کنید:

  • یک تک شماره به خط مربوط به آن شماره اشاره می کند
  • محدوده ها توسط دو شماره جدا شده با خط تیره (-) مشخص می شوند
  • شماره خطوط متعدد یا محدوده های خطوط متعدد با کاما (,) از هم جدا می شوند
  • فاصله های خالی مجاز هستند و تاثیری در نتیجه ندارند

کاربرد:

 <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-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

لینک خودکار

آدرس ها و ایمیل های موجود در کد را به لینک های قابل کلیک تبدیل می کند. لینک های Markdown موجود در کامنت ها را Parse میکند.

آدرس ها و ایمیل ها به صورت خودکار لینک میشوند، نیازی نیست شما کاری انجام دهید برای لینک کردن یک متن به یک آدرس خاص در کامنت، از Markdown Syntax ممکن است استفاده کنید:

کاربرد:

 <pre>
<code class="language-css">
@font-face {
    src: url(http://lea.verou.me/logo.otf);
}

</code>
</pre>

مثال:

 @font-face {
    src: url(http://lea.verou.me/logo.otf);
    font-family: 'LeaVerou';
}

نمایش کاراکتر های پنهان

کاراکتر های مخفی مانند tab ها و یا line break ها را نمایش دهید.

مثال:

 (function() {
    if ( typeof self !=='undefined' && !self.Prism || typeof global !=='undefined' && !global.Prism) {
        return;
    }
    Prism.hooks.add('before-highlight', function(env) {
        var tokens=env.grammar;
        tokens.tab=/\t/g;
        tokens.crlf=/\r\n/g;
        tokens.lf=/\n/g;
        tokens.cr=/\r/g;
        tokens.space=/ /g;
    }
    );
}

)();

هایلایت فایل

فایل های خارجی را بارگیری کرده و توسط Prism هایلایت کنید. در خود وب سایت Prism از این روش استفاده شده است.

از صف data-src بر روی یک المان <pre> خالی استفاده کنید، به این صورت:

کاربرد:

 <pre data-src="myfile.js">
</pre>

نیازی نیست که زبان را مشخص کنید، چرا که به صورت خودکار از روی پسوند فایل مشخص می شود. اگر به هر علت زبان از روی فایل مشخص نشود و یا پسوند فایل نادرست باشد، میتوانید زبان را نیز مشخص کنید (با روش افزودن کلاس به طور معمول).

توجه داشته باشید که فایل ها توسط XMLHttpRequest بارگیری می شوند. این به این معنی است که اگر فایل شما بر روی یک Origin متفاوت باشد دریافت با خطا مواجه خواهد شد، مگر اینکه CORS در آن وب سایت فعال باشد.

مثال:


        

سفارشی سازی قالب

سفارشی سازی کنید و به صورت زنده مشاهده کنید.
طرح قالب

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

How can we help? 😄

7:45 ق.ظ

Hey John, I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 ق.ظ

Stack admin is the responsive bootstrap 4 admin template.

8:01 ق.ظ