Chameleon Admin از Prism به عنوان برجسته کننده نحو استفاده می کند، برای استفاده از آن باید فایل JS و CSS را در صفحه HTML قرار دهید.
Prism تمام تلاش خود را می کند تا شیوه های نویسندگی خوب را تشویق کند. <code>
elements, since marking up code without a <code>
element is semantically invalid. با توجه به مشخصات HTML5, the recommended way to define a code language is a language-xxxxclass, which is what Prism uses. To make things easier however, Prism assumes that this language definition is inherited. Therefore, if multiple <code>
elements have the same language, you can add the language-xxxxclass on one of their common ancestors. This way, you can also define a document-wide default language, by adding a language-xxxxclass on the <body>
or <html>
element.
اگر می خواهید از برجسته کردن برای یک انصراف دهید<code>
element that is a descendant of an element with a declared code language, you can add the class language-noneto it (or any non-existing language, really).
راrecommended way to mark up a code block(both for semantics and for Prism) is a <pre>
element with a <code>
element inside, like so:
کد:
<pre>
<code class="language-css">
p {
color: red
}
</code>
</pre>
خروجی
p {
color: red
}
اگر از آن الگو استفاده می کنید،<pre>
will automatically get the language-xxxxclass (if it doesn't already have it) and will be styled as a code block.
نشانه گذاری HTML
از کد زیر برای استفاده از برجسته کننده نحو HTML استفاده کنید.
استفاده:
<pre>
<code class="language-markup">
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
از کد زیر برای استفاده از برجسته کننده نحو HTML استفاده کنید.
استفاده:
<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 Markup
از کد زیر برای استفاده از برجسته کننده نحو HTML استفاده کنید.
استفاده:
<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>
) and not for inline code. Add class line-numbers to your desired <pre>
and line-numbers plugin will take care.
اختیاری: می توانید مشخصه data-start (Number) را روی آن مشخص کنید<pre>
element. It will shift the line counter.
استفاده:
<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 attribute on the <pre>
element, in the following simple format:
- یک عدد به خطی با آن عدد اشاره دارد
- محدوده ها با دو عدد مشخص می شوند که با خط فاصله (-) از هم جدا می شوند.
- تعداد خطوط یا محدوده های متعدد با کاما از هم جدا می شوند.
- فضای خالی در هر جایی مجاز است و حذف خواهد شد.
استفاده:
<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;
}
URL ها و ایمیل های موجود در کد را به لینک های قابل کلیک تبدیل می کند.Parses Markdown links in comments.
URL ها و ایمیل ها به طور خودکار پیوند می شوند، نیازی به انجام کاری ندارید.
استفاده:
<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';
}
نمایش کاراکترهای مخفی مانند برگه ها و خطوط شکست.
مثال:
(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 آنها را برجسته کنید.
استفاده کنیدdata-src attribute on empty <pre>
elements, like so:
استفاده:
<pre data-src="myfile.js">
</pre>
شما نیازی به تعیین زبان ندارید، به طور خودکار توسط پسوند فایل تعیین می شود.
لطفاً توجه داشته باشید که فایل ها با XMLHttpRequest واکشی می شوند.
مثال:
