форум Реклама в интернете

Форум eBanners.Ru: Реклама в интернете и раскрутка сайтов - форум по интернет-рекламе 
Подсветка кода - библиотеки, позволяющие делать подсветку кода на страницах своего сайта - Веб-дизайн, разработка сайтов и создание баннеров - интернет-реклама
 РегистрацияРегистрация   ВходВход 
У вас есть вопрос по рекламе в интернете и раскрутке сайтов? Задайте его здесь и вам ответят.
Вы уже всё знаете? Помогите тем, кто знает пока не всё. Правила форума| Сделать стартовой|Добавить в избранное.

Реклама SU: продвижение сайта (ОПЛАТА за РЕЗУЛЬТАТ) и контекстная реклама на Яндексе без наценки.

Подсветка кода - библиотеки, позволяющие делать подсветку кода на страницах своего сайта

 
   Список форумов Реклама в интернете -> Веб-дизайн, разработка сайтов и создание баннеров
Форум Раскрутка сайтов  
Автор Сообщение
Николай ПопковОффлайн
Admin
Зарегистрирован: 16.11.2004
Всего сообщений: 1052
Откуда: Волгоград
Возраст: 50
Пол: Мужской
31 Май 2008 Сб 19:55   Подсветка кода - библиотеки, позволяющие делать подсветку кода на страницах своего сайта

Читать код значительно удобнее в редакторе с подсветкой синтаксиса. Поэтому очень полезно сделать такую подсветку на страницах своего сайта. В этой статье я расскажу о библиотеках, которые позволяют легко решить эту задачу.

В первую очередь определим минимальные требования к таким библиотекам:

1) подсветка кода без лишних действий с вашей стороны, т.е. в идеале нужно указать только язык, подсветку для которого нужно включить, и выделить сам блок с кодом (обычно с помощью тегов <pre>);

2) нумерация строк кода (очень удобно ссылаться на эти номера в описании, да и посетителю будет легче ориентироваться).

На сегодняшний день существует довольно много библиотек, выполняющих подсветку кода. Но по принципу работы, на мой взгляд, можно выделить два основных типа:

1) подсветка синтаксиса выполняется на стороне клиента, т.е. браузером;

2) подсветка выполняется серверным скриптом.

В первом случае браузер получает страницу, в которой блоки кода не имеют подсветки и находятся внутри тегов <pre><code>…</code></pre> (теги могут быть другими) и JavaScript функцию.

При загрузке страницы будет выполнена js функция, которая проанализирует содержимое этих блоков, “раскрасит” код, пронумерует строки и т.д.

Во втором варианте блоки кода анализируются на стороне сервера, и тут же выполняется подсветка. Например, если исходная страница содержит:
<pre lang="php"> if ($tagcloud === FALSE) {</pre>

то браузер получит что-то вроде:


Код:
<div class="ch_code_container" style="font-family: monospace;white-space: nowrap;height:-1px;">
<ol>
<li style="font-family: ‘Courier New’, Courier, monospace; color: black; font-weight: normal; font-style: normal;">
<div style="font-family: ‘Courier New’, Courier, monospace; font-weight: normal;"><span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$tagcloud</span> === <span style="color: #000000; font-weight: bold;">FALSE</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></div>
</li>
</ol>
</div>
Примечание. Этот блок не форматировался.

Как видите, здесь каждый элемент находится внутри тегов <div> или <span>, для которых установлены соответствующие стили.

Теперь о преимуществах и недостатках.

Первый вариант (подсветка на стороне браузера с помощью JavaScript).
Преимущества.
1) Меньше нагрузка на сервер (хотя, если страницы кэшируются, особенной разницы не будет).
2) Если вставки кода большие, то может быть выигрыш в размере страницы (т.е. размер JavaScript будет меньше размера дополнительной разметки со стилями во втором варианте).

Недостатки.
1) Нужна поддержка JavaScript на стороне клиента. Если страница просматривается в браузере, то это не проблема, а вот в RSS ридере подсветку не увидите.
2) Размер страницы увеличивается за счет js-файла и грузить его ради пары строк как-то не рационально (т.е. выигрыш в размере можно получить только при достаточно больших блоках кода).

Второй вариант (подсветка на стороне сервера).
Преимущества.
1) Такую подсветку правильно отображают не только браузеры, но и RSS ридеры и eMail клиенты (актуально, если вы рассылаете ленту по почте).

Недостатки.
1) Объем страницы увеличивается и довольно сильно.
2) Увеличивается время формирования страницы.

Теперь переходим к библиотекам.

Для подсветки на стороне браузера можно использовать:

1) highlight.js

2) Code Press

3) Mike Samuel’s JavaScript Code Prettifier

4) SyntaxHighlighter – существует плагин для WordPress, основанных на этой библиотеке

Следующие три библиотеки позволяют не только подсветить код, но и создать текстовый редактор внутри textarea.

5) Edit area

6) CodeMirror

7) Helene

Подсветка на стороне сервера:

1) GeSHi (наверное, самая распространенная) на ее основе создан ряд плагинов для различних CMS

2) GNU Enscript и плагин для WordPress на ее основе - Syntax Highlighting with Enscript.

3) Highlight - плагин для WordPress.

Теперь приведу список плагинов WordPress, которые работают на основе GeSHi

4) iG:Syntax Hiliter

5) CodeColorer

6) Highlight Source Pro

7) Code Snippet 2.0

8 ) Dean’s Code Highlighter – этот плагин я использую в своем блоге.

9) WP-Syntax

Пару слов о количестве поддерживаемых языков. Если вам нужна подсветка широко распространенных языков (вроде C++, Java, PHP, HTML), то, скорее всего, вам подойдет любая из упомянутых здесь библиотек. Если же вы хотите подсветить что-нибудь экзотическое, то и в этом случае есть из чего выбрать. Например, GeSHi поддерживает более 70 языков

Источник http://www.simplecoding.org/raskrashivaem-bloki-s-kodom.html
Автор Стаценко Владимир
Вернуться к началу
View user's profile Посетить сайт автора 
Показать сообщения:   
Форум Маркетинг и реклама
Бесплатный обмен ссылками
Лучшие партнерские программы
Партнерка по играм и бесплатные игры
Партнерская программа по знакомствам
Сайт знакомств и чат знакомств
Общение: форум и чат волчат
Куплю рекламу на вашем сайте
Программа раскрутки 1ps и Помощь в заполнении форм

Полезные сервисы: Мой ip адрес / My IP Address как узнать свой IP.
Бесплатная виртуальная клавиатура онлайн - русский, английский и другие языки.
Tранслит и перевод транслита.

агентство знакомств
ремонт фотоаппаратов

форум по интернет-рекламе