برای Highlight کردن کد چند تا کتابخونه خیلی خوب در js وجود داره مثل Prism, highlight و Rainbow
من به چند دلیل Prism رو انتخاب کردم اولیش اینکه این کتابخونه تقریبن از بیشتر زبان های برنامه نویسی رایچ پشتیبابی میکنه بعد اینکه کتابخونه Rainbow از Prism استفاده میکنه و اینکه از ترکیب رنگش نسبت به کتابخونه highlight بیشتر خوشم اومد.
شروع کار خیلی راحت هست کافیه اسکریپت و استایل کتابخونه را به صفحه اضافه کنیم
|
1 2 3 |
<link href="http://prismjs.com/themes/prism.css" rel="stylesheet" /> <script src="http://prismjs.com/prism.js"></script> |
بعد هر کدی را که میخواید highlight کنیم را در ساختار زیر قرار بدید
|
1 |
<pre><code class="language-XXXX">code goes here </code></pre> |
برای مثال
|
1 |
<pre><code class="language-php"><?php set_time_limit(0);?></code></pre> |
به این صورت به طور خودکار کدها Highlight میشن
برای اینکه محتویات اضافه شده جدید به صفحه رو Highlight کنید میتونید از کد زیر استفاده کنید
|
1 2 3 4 5 6 |
// <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 |
و یا از کد زیر استفاده کنید تا کل صفحه رو اسکن کنه
|
1 |
Prism.highlightAll() |
این کدی که مثال زدم در Api این کتابخونه هست ولی من هرکاری کردم یکی از دو خطای زیر رو میداد
|
1 2 3 |
prism.js:2 Uncaught TypeError: Cannot read property 'rest' of undefined // Uncaught TypeError: Cannot read property 'className' of undefined |
به یک طریق دیگه تونستم این کار را انجام بدم
|
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 رو اسکن نکنه.
|
1 |
<script src="http://prismjs.com/prism.js" data-manual ></script> |
چند تا محدودیت هم داره این کتابخونه از جمله اینکه از IE نسخه ۶ تا ۸ پشتیبانی نمیکنه.
تو سایت اصلی کتابخونه هم میتونید زبان های پشتیبانی شده رو ببینید هم Prism رو به صورت سفارشی شده (استایلها و تنظیمات مختلف) دانلود کنید.