Home Явно полезное RSS
Главная » Полезное вебмастеру

Подсветка кода на сайте

Подсветка кодаПодсветка кода на сайте не представляет сложностей. Подсветку кода на сайте можно выполнять несколькими методами. Один из них, кстати самый распространенный и самый оптимальный - это использование javascript на стороне клиента. Второй использование специальных php библиотек на стороне сервера. Третий - использование некоторых встроенных в php функций подсветки кода, например highlight_string().

В данном посте мы рассмотрим подсветку кода на стороне клиента с помощью javascript библиотеки jQuery и плагина Chili. Оба скрипта работают совместно, на сайте занимают очень мало места, что дает возможность загружать страницу сайта в браузер максимально быстро.

Итак процесс установки:

  1. Скачать и распаковать в одну папку корневого каталога вашего сайта библиотеку jQuery и скрипты плагина Chili, пусть это будет папка Chili.
  2. Между тегами <Head>...</Head> вашей HTML страницы подключить установленные скрипты сделав следующую запись:
    3. <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>
    Нужно обратить внимание на версии подключаемых скриптов. Как ни странно, но именно в таком соотношении версий плагина Chili и javascript библиотеки jQuery подсветка работает нормально во всех браузерах. Для случая, когда есть сложности со скачиванием указанных версий скриптов вот архив.
  3. Подсвечиваемый код необходимо заключить в теги <code class="...">...</code>, где в атрибуте class необходимо указать название подсвечиваемого языка, например class="html" или class="cplusplus". Название языка совпадает с названием соответствующего ему скрипта в папке chili (cplusplus.js, php.js и т. д.).

Для подсветки кода состоящего из нескольких строк необходимо использовать тег <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 достаточно удобен и оптимален.

Книги и учебники :

Компьютер и интернет :

Поиск по сайту :

Реклама :

Облако меток :

Бесплатная подписка :

Получайте свежие скрипты, программы, и уроки по сайтостроению прямо в свой RSS ридер! Подписка на RSS

Статистика :
Top.Mail.Ru