Тестовый дизайн новой версии сайта IGD.BY         RU   |   EN
Вставка примеров кода в веб-страницу
Автор: Кристофер

С этой проблемой сталкивался чуть ли не каждый веб-программист, тем паче блогер, пишущий на IT-тематику. Как вставить фрагмент кода в статью, чтобы показать его в качестве примера? Решений предлагается много, но как это ни странно, в них очень часто путаются. И есть почему. 

Сама проблема именно вставки очевидна — браузер должен отличать код страницы от примеров, на ней представленных. В общем-то решение у ситуации всегда одно — замена открывающих и закрывающих угловых скобок < и > на их спецсимвольные эквиваленты &lt; и &qt; соответственно. Затем желательно поместить обработанный таким образом код в <code></code>, либо что сейчас чаще встречается <pre></pre>.

Это можно сделать как вручную, так и воспользовавшись целым арсеналом онлайн-конверторов, которые условно можно разделить на две группы:

1. Экранирующие угловые скобки и другие ключевые символы (а иногда и вообще все). К таким относятся:

 

Пример сервиса http://htmlconvert.net/

 

2. Те, которые не только экранируют угловые скобки, но и добавляют стили/подсветку синтаксиса. Среди таких сервисов стоит выделить:

 

Пример сервиса http://markup.su/highlighter/

 

Все, что вам нужно во втором случае, это вставить фрагмент кода в соотвествующее окно, указать язык программирования, нажать кнопку Highlight и получить уже готовый html-вариант, сверстанный по выбранному стилю. 
Его вы можете помещать в тело страницы. При этом всегда обращайте внимание на правильность подсветки кода. С этим также можно столкнуться довольно часто. Например, если вы хотите красиво подсветить код PHP, выберете этот язык в настройках конвертера, часть функций может подсветиться, а часть нет. Просто конвертер работает с синтаксисом на базовом уровне. Хотя это и не всегда так. 

На самом деле, кому-то это решение покажется удобным, но... (а "но" обычно бывает всегда), в ряде случаев отображение уже в теле страницы может происходить не так гладко, а самый большой минус — далеко не все WYSIWYG-редакторы, в том числе любимые всеми TynyMCE и CKEditor правильно понимают подобного рода вставки. Их нужно для этого подготовить. Самая часто встречающаяся ситуация, когда в поле textarea WYSIWYG-редактора отображается информация не обработанная htmlspecialchars(). В результате, при каждом пересохранении будут съедаться угловые скобки, что может привести не только к потере данных, но и к искажению общей верстки. 

Причем, и для TynyMCE, и для CKEditor, есть плагины, позволяющие вставлять фрагменты кода, так называемые, code snippets, но они вызывают проблемы с установкой, поэтому широко не используются.

Поэтому в данном случае нужно действовать самостоятельно, воспользовавшись специальными скриптами под JQuery. Перед тем как рассказать о ключевых из них, напомним, что если вы используете TynyMCE или CKEditor, для вставки примеров кода через теги <pre></pre>, отображаемый в textarea контент нужно обрабатывать htmlspecialchars(), а вставляемый код предварительно обрабатывать в онлайн-редакторах первой группы.

 

google-code-prettify

 

На момент написания статьи, последнее обновлениe было в марте 2013 года, и его вполне достаточно. На нашем сайте сейчас используется именно этот код-сниппет. 

Отдельно хочется сказать о небольших настройках. Итак, вы загрузили этот сниппет с сайта, также вы можете выбрать одну из пяти тем по этой ссылке, где находятся css-файлы. Сохраняете их в нужную папку на сайте. Затем прописываете соотвествующие строки:

<script type="text/javascript" src="/js/pretty/run_prettify.js"></script>
<link href="/js/pretty/sunbirst.css" type="text/css" rel="stylesheet" />

Чтобы активизировать сниппет, нужно тегам &lt;pre&gt;&lt;/pre&gt; или &lt;code&gt;&lt;/code&gt; присвоить класс prettyprint. Сделать это можно и автоматически сразу для всех. Например, если у вас подключено jQuery, то в скрипт страницы просто добавьте строку:

$("pre").addClass("prettyprint");

 

SyntaxHighlighter

 

Пожалуй, самый популярный скрипт для вставки и подсветки кода. Все что нужно для установки, это скачать js и css файлы, после подключить их в заголовке, а затем дейтвовать по одному из двух направлений. Скрипт предлагает два варианта вставки как таковой, а именно, через <pre></pre>, либо же через <script></script>. Второй вариант является более удобным, поскольку не нужно возиться с экранированием угловых скобок, но он может неадекватно отображаться в WYSIWYG-редакторах. Для каждого языка программирования предусмотрены свои настройки, которые хранятся в отдельных js-файлах, и по терминологии разработчика называются brush'ами, то есть, кистями. 


В целом, все очень удобно и быстро настривается. Единственный недостаток - малое разнообразие уже готовых css-стилей. 

Snippet — jQuery Syntax Highlighter

 

Также очень популярный и распространенный продукт. На нашем сайте раньше использовался именно он, но после был заменен на google-code-prettify из-за нестабильной работы. Установка занимает 5 минут — скачиваются js и css-файлы, подключаются в заголовке. Причем сразу при установке выяляется первая проблема - скрипт написан на более ранних версиях jQuery, и как обычно бывает с этой библиотекой, при обновлении версии, её разработчики абсолютно плюют на обратную совместимость со старыми. Так произошло и в данном случае: в jQuery, начиная с версии 1.9 удалена функция $.browser. Но она активно используется скриптом Snippet для кроссбраузерности с Opera. Исправить эту проблему можно заплаткой, скачав файл https://github.com/pupunzi/jquery.mb.browser/archive/master.zip. В общем, это один из амых красивых код-сниппетов, имеющих множество различных красивых стилей, но из-за низкой отказоустойчивости, мы его решили не применять.

<?
//********************************//
//*********KION CMS v.2.5*********//
//*********(c)igd.by 2014*********//
//********************************//

//Кодировка и сжатие
ob_start("ob_gzhandler");
header("Content-Type: text/html; charset=utf-8");
echo "Hello, world!";


Далее все по накатанной — большой выбор поддерживаемых языков программирования и стилей оформления. Дополнительные возможности по сворачиванию/разворачиванию окон и так далее.