برجسته کردن نحوه نوشتن
ابتدا لازم است فایلهای prism.css و prism.js را در داخل وارد کنیدappearance-syntax-highlighter.jadeفایل شامل شده است
پریسمس بهترین کار را برای تشویق شیوه های نوشتن خوب انجام می دهد. بنابراین، تنها با این نسخهها کار میکند <code>
عناصر، از مارک کردن کد بدون یک<code>
عنصر از لحاظ معنایی نامعتبر است با توجه به مشخصات HTML5,
روش توصیه شده برای تعریف یک زبان کد یک است language-xxxxکلاس، که چه چیزی است
منشور استفاده می کند با این حال، به نظر ساده تر، Prism فرض می کند که این تعریف زبان به ارث برده می شود. بنابراین، اگر چند<code>
عناصر یک زبان مشابه دارند، می توانید آن را اضافه کنیدlanguage-xxxxکلاس در یکی از اجداد مشترک آنها.
به این ترتیب، می توانید یک زبان پیش فرض سند را با اضافه کردن یک کلاسlanguage-xxxxدر <body>
یا عنصر<html>
.
اگر می خواهید از برجسته کردن برای یک استفاده کنید<code>
عنصر که یک نسل از عنصر با یک زبان کد اعلام شده است، می توانید کلاس را اضافه کنیدlanguage-noneبه
آن (یا هر زبان غیر موجود، واقعا).
The راه های توصیه شده برای علامت گذاری یک بلوک کد(هر دو برای معناشناسی و برای Prism) یک است<pre>
یک عنصر با<code>
عنصر داخل، مانند:
کد:
<pre>
<code class="language-css">
p {
color: red
}
</code>
</pre>
خروجی
p {
color: red
}
اگر از این الگوی استفاده کنید،<pre>
به صورت خودکار دریافت خواهد شدlanguage-xxxxکلاس (اگر آن را قبلا آن را ندارند) و به عنوان یک بلوک کد مدل می شود.
نشانه گذاری 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-block">
<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-block">
<a class="card-link">
Card link</a>
<a 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
استفاده از کد زیر برای استفاده از نشانه 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>
) و نه برای کد درون خطی. شماره خط کلاس را به دلخواه خود اضافه کنید<pre>
و افزونه خط شماره ها مراقبت خواهند کرد.
اختیاری: شما می توانید ویژگی data-start (Number) را در<pre>
عنصر این خط مقابله را تغییر خواهد داد.
استفاده:
<pre class="line-numbers">
<code class="language-css">
p {
color: red
}
</code>
</pre>
مثال :
(function() {
if (typeof self==='undefined' || !self.Prism || !self.document) {
return;
}
}
());
برجسته خطوط خاص و / یا محدوده خط.
شما خطوطی را که از طریق خط داده ویژگی در<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;
}
URL ها و ایمیل ها را در کد به لینک های قابل کلیک تبدیل می کند.بازده معاملهلینک ها در نظرات
URL ها و ایمیل ها به طور خودکار پیوند داده می شوند، لازم نیست کاری انجام دهید. برای پیوند برخی از متن درون یک نظر به یک 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 آن را برجسته کنید. در وب سایت خود Prism استفاده می شود.
استفاده data-src ویژگی خالی<pre>
عناصر، مانند:
استفاده:
<pre data-src="myfile.js">
</pre>
شما لازم نیست زبان را مشخص کنید، به طور خودکار با فرمت فایل تعیین می شود. اگر، با این حال، زبان را نمی توان از فرمت فایل تعریف کرد یا فرمت فایل نادرست است، شما همچنین ممکن است یک زبان را با نام معمول (نام کلاس) مشخص کنید.
لطفا توجه داشته باشید که فایل ها با XMLHttpRequest جمع آوری می شوند. این بدان معنی است که اگر فایل بر مبنای دیگری باشد، انتخاب آن خراب خواهد شد، مگر اینکه CORS در آن وبسایت فعال باشد.
