Подсветка кода на сайте
Подсветка кода на сайте не представляет сложностей. Подсветку кода на сайте можно выполнять несколькими методами. Один из них, кстати самый распространенный и самый оптимальный - это использование javascript на стороне клиента. Второй использование специальных php библиотек на стороне сервера. Третий - использование некоторых встроенных в php функций подсветки кода, например highlight_string().
В данном посте мы рассмотрим подсветку кода на стороне клиента с помощью javascript библиотеки jQuery и плагина Chili. Оба скрипта работают совместно, на сайте занимают очень мало места, что дает возможность загружать страницу сайта в браузер максимально быстро.
Итак процесс установки:
- Скачать и распаковать в одну папку корневого каталога вашего сайта библиотеку jQuery и скрипты плагина Chili, пусть это будет папка Chili.
- Между тегами <Head>...</Head> вашей HTML страницы подключить установленные скрипты сделав следующую запись:
- Подсвечиваемый код необходимо заключить в теги <code class="...">...</code>, где в атрибуте class необходимо указать название подсвечиваемого языка, например class="html" или class="cplusplus". Название языка совпадает с названием соответствующего ему скрипта в папке chili (cplusplus.js, php.js и т. д.).
<script src="/chili/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/chili/jquery.chili-2.2.js" type="text/javaScript"></script>
<script type="text/javascript">ChiliBook.recipeFolder = "/chili/";</script>
Для подсветки кода состоящего из нескольких строк необходимо использовать тег <pre>, причем если необходимо снабдить код еще и номерами строк то <pre> нужно писать с атрибутом <pre class="ln-"> (начинается с 1)
if(n == 11)
{
if((cRxBuf[n] & 0xf0) == 0x30)
KsReal = (KsReal | (cRxBuf[n] & 0x0f)) << 4;
else if((cRxBuf[n] & 0xf0) == 0x40)
KsReal = (KsReal | ((cRxBuf[n] & 0x0f) + 9)) << 4;
}
<pre class="ln-20"> (начинается с 20)
if(n == 11)
{
if((cRxBuf[n] & 0xf0) == 0x30)
KsReal = (KsReal | (cRxBuf[n] & 0x0f)) << 4;
else if((cRxBuf[n] & 0xf0) == 0x40)
KsReal = (KsReal | ((cRxBuf[n] & 0x0f) + 9)) << 4;
}
При копировании кода со страницы появляется отдельное небольшое окно без нумерации строк. Вобщем и целом скрипт подсветки кода Chili достаточно удобен и оптимален.
Электроника :
- Техника электроника (11)
- Полезная электроника (4)
- Электроника для всех (5)
- Техника для дома (6)
- Cхемотехника ПЛИС (11)
- Пректирование PCAD (4)
Программирование :
- Микроконтроллеры (9)
- ПЛИС VHDL Verilog (29)
- C++ Builder (7)
- Visual Studio C++ C# (7)
- Java programming (7)
- Matlab programming (4)
Сайтостроение :
- Сайтостроение HTML (5)
- Сайтостроение PHP (8)
- PHP CMS на файлах (3)
- Web инструменты (9)
- Полезное вебмастеру (11)
- SEO раскрутка сайта (4)
- PHP скрипты (3)
Реклама :
Книги и учебники :
- Шаблоны сайтов (6)
- Книги и учебники (2)
Компьютер и интернет :
Поиск по сайту :
Реклама :
Облако меток :
Бесплатная подписка :
Статистика :
- Популярность (3)
- Посещаемость (3)
- Поисковые запросы (3)