با Prism هر کدی را HIGHLIGHT کنید

برای Highlight کردن کد چند تا کتابخونه خیلی خوب در js وجود داره مثل Prism, highlight و Rainbow

من به چند دلیل Prism رو انتخاب کردم اولیش اینکه این کتابخونه تقریبن از بیشتر زبان های برنامه نویسی رایچ پشتیبابی میکنه بعد اینکه کتابخونه Rainbow از Prism استفاده میکنه و اینکه از ترکیب رنگش نسبت به کتابخونه highlight بیشتر خوشم اومد.

شروع کار خیلی راحت هست کافیه اسکریپت و استایل کتابخونه را به صفحه اضافه کنیم

<link href="http://prismjs.com/themes/prism.css" rel="stylesheet" />

<script src="http://prismjs.com/prism.js"></script>

بعد هر کدی را که میخواید highlight کنیم را در ساختار زیر قرار بدید

<pre><code class="language-XXXX">code goes here </code></pre>

1	<pre><code class="language-XXXX">code goes here </code></pre>

برای مثال

<pre><code class="language-php"><?php set_time_limit(0);?></code></pre>

1	<pre><code class="language-php"><?php set_time_limit(0);?></code></pre>

به این صورت به طور خودکار کدها Highlight میشن

برای اینکه محتویات اضافه شده جدید به صفحه رو Highlight کنید میتونید از کد زیر استفاده کنید

// <pre id='id-identifer'><code language='language-php'><?php set_time_limit(0);?></code></pre>

var element= document.getElementById('id-identifier');
Prism.highlightElement(element);
//or
Prism.highlightElement($('#id-identifier')[0]); //using jquery

// <pre id='id-identifer'><code language='language-php'><?php set_time_limit(0);?></code></pre>

var element= document.getElementById('id-identifier');

Prism.highlightElement(element);

//or

Prism.highlightElement($('#id-identifier')[0]); //using jquery

و یا از کد زیر استفاده کنید تا کل صفحه رو اسکن کنه

Prism.highlightAll()

1	Prism.highlightAll()

این کدی که مثال زدم در Api این کتابخونه هست ولی من هرکاری کردم یکی از دو خطای زیر رو میداد

prism.js:2 Uncaught TypeError: Cannot read property 'rest' of undefined
//
Uncaught TypeError: Cannot read property 'className' of undefined

prism.js:2 Uncaught TypeError: Cannot read property 'rest' of undefined

Uncaught TypeError: Cannot read property 'className' of undefined

به یک طریق دیگه تونستم این کار را انجام بدم

var highlighted_code= Prism.highlight('<?php set_time_limit(0);?>','php);
 $('#id-identifier').html('<pre>' + highlighted_code + '</pre>'); //using jquery

1 2	var highlighted_code= Prism.highlight('<?php set_time_limit(0);?>','php); $('#id-identifier').html('<pre>' + highlighted_code + '</pre>'); //using jquery

اگه قرار هست اینطوری کد را به صورت دستی به یکی از سه روش بالا highlight کنید باید مقدار data-manual رو به تگ script اضافه کنید تا Prism به صورت خودکار کدها را highligh نکنه و dom رو اسکن نکنه.

<script src="http://prismjs.com/prism.js" data-manual ></script>

1	<script src="http://prismjs.com/prism.js" data-manual ></script>

چند تا محدودیت هم داره این کتابخونه از جمله اینکه از IE نسخه ۶ تا ۸ پشتیبانی نمیکنه.

تو سایت اصلی کتابخونه هم میتونید زبان های پشتیبانی شده رو ببینید هم Prism رو به صورت سفارشی شده (استایلها و تنظیمات مختلف) دانلود کنید.

دیدگاهتان را بنویسید لغو پاسخ