Подсветка синтаксиса малыми средствами

В html-кодинге практически все можно сделать по крайней мере двумя способами: медленно и некрасиво или быстро и красиво. Другими словами — элегантно, когда сравнительно компактный код отображается корректно в наиболее известных браузерах.

Другое дело, что html не во всех случаях соответствует запросам. Тогда уже на помощь приходят различные "примочки", называемые фреймуорками. Однако о фреймуорках мы говорить не будем (хотя для обсуждения это очень интересная тема). Речь пойдет о более широком, в общем-то, понятии — о JavaScript.

Love story

В статьях, публикуемых на сайте, я довольно часто привожу отрывки (листинги) различного кода. За оформление кода отвечает следующий элемент:

.preview {padding:1em 25px .3em;margin:0;border-left:3px solid #cfcfa5;background:#fafaed;}

Все бы хорошо, но этот способ имеет несколько недостатков: нет подсветки синтаксиса и нумерации строк, а весь код, если его не форматируешь, сбивается в некий бесформенный массив. В принципе, проблема не столь глобальна, но недавно я нашел средство под названием SyntaxHigh-lighter и убедился, что можно сделать, как я уже говорил, красиво и удобно. Этот способ подсветки я впервые заметил на портале Yahoo Developer Network (developer.yahoo. com), после чего сразу же сохранил одну из страниц:). В содержании .js-файлов стояла ссылка www.dreamprojections. com/syntaxhighlighter/, где я и нашел то, что было нужно. SyntaxHighlighter поддерживает чуть более 10 разных языков включая CSS, PHP, AQL, Ruby, Java и др. Подсветка и нумерация и прочие удобства — все включено.

Практика

Сразу же обращаю ваше внимание: подсветка не "светит" без включенной опции JavaScript. Скорее всего, у большинства интернетчиков данная опция включена, так как далеко не все знают, что это такое:). С другой стороны, на вашем сайте, посвященном какому бы то ни было программированию, такие "незнающие" люди вряд ли появятся. В таком случае вам придется честно уведомить их, например, где-нибудь в footer'e web-страницы о том, что JavaScript выключать нежелательно. Во всей мощи SyntaxHighlighter занимает 40 Kb, а если убрать ненужные скрипты — раза в два меньше… Да ну этот минимализм:)! Я лучше объясню вам, как внедрить SyntaxHighlighter в web-страницы. Мой "проектный" сайт базируется на Snews, поэтому стартовая страница — index.php (на самом деле это xhtml). В конце файла перед тегом </body> я прописал:

<script language="javascript" src="js/sh Core.js"></script>
<script language="javascript" src="js/sh BrushCSS.js"></script>
<script language="javascript" src="js/sh BrushPhp.js"></script>
<script language="javascript" src="js/sh BrushCSharp.js"></script>
<script language="javascript" src="js/sh BrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Как видите, я инициализировал только те скрипты (т.е. ту подсветку), которые буду использовать в дальнейшем. Кроме того, не забываем о ядре shCore.js — его подключаем обязательно. Нужные скрипты вы найдете в папке scripts/. Скопировав их на свой сайт, проверьте, правильно ли указаны все имена и пути. Как видно в вышеизложенном коде, я поместил скрипты в директорию /js. Далее подключаем стилевой файл:

<link type="text/css" rel="stylesheet" href="template/SyntaxHighlighter.css"></link>

Собственно, вот и вся подготовка к будущей верстке. А сейчас пару слов о разметке: как оформить код, чтобы он выводился через Syntax-Highlighter. В разделе Wiki на сайте www.dreamprojections. com/syntaxhighlighter/ описываются два способа:

1. С помощью тега <pre> и атрибутов code и class:
<pre name="code" class="html">
… наш код …
</pre>

Важная деталь: непосредственно в том коде, который вы собираетесь выводить, скобки нужно заменить на &lt; (html-аналог "<") и &gt; (вместо ">"). Для надежности я также заменяю одинарную кавычку ' на &#39;.

2. С помощью тега <textarea>:
<textarea name="code" class="c#" cols="60" rows="10">
… наш код …
</textarea>

Это менее надежный вариант: в результате есть риск увидеть совсем не то, чего хотелось. Не советую использовать в паре с TinyMCE (такой wysiwyg-редактор, для справки) или RSS. Я думаю, одно другого не стоит. Посредством атрибута class мы можем управлять выводом кода. Пример:

<pre name="code" class="html:атрибут1: атрибут2:…">
… код …
</pre>

Перечень атрибутов

• nogutter — не отображать нумерацию строк
• nocontrols — не показывать верхнюю строку
• collapse — показывать код в свернутом виде
• firstline[число] — номер первой строки. По умолчанию равен 1 :)
• showcolumns — деление на столбцы

Языковые алиасы

Когда я говорил о выводе уже отформатированного текста, то упомянул html:
<pre name="code" class="html">

Разумеется, это не единственный вариант подсветки синтаксиса — в SyntaxHighlighter'е за это отвечают языковые псевдонимы (алиасы, англ.: aliases), и "html" — только один из них. В каждом подключаемом *.js-файле содержится по нескольку алиасов: как вы понимаете, они сгруппированы по общности регулярных выражений. Примеры: файл shBrushCpp.js — псевдонимы 'cpp', 'c', 'c++'; shBrushRuby.js — 'ruby', 'rails', 'ror' и т.д. В общем, смотрите соответствующую таблицу на сайте поддержки.

Альтернатива?

В ходе написания статьи я встретил похожий скрипт для подсветки синтаксиса. Называется он Google Code Prettifier, скачать его можно по адресу www.google-code-prettify.googlecode.com. Отличие SyntaxHighlighter'а — он несколько проще в "обслуживании". Хотя, казалось бы, куда уж проще? Подключение осуществляется таким образом. В индексный файл пишем:

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

Пути к файлам должны соответствовать тому, куда вы эти файлы скопировали. Кроме этого, в документ необходимо добавить тег

<body onload="prettyPrint()">

Все, код можно выводить через

<pre class="prettyprint">...</pre>
или
<code class="prettyprint">...</code>

По функциональности Go-ogle Сode Prettifier "однобок": кроме подсветки синтаксиса, ничего предложить не может. Этот скрипт поддерживает PHP, HTML, Python, XML, Java, C, C++ и др. Демонстрационная страница с вариантами подсветки здесь: www.google-code-prettify.goog lecode.com/svn/trunk/tests/ prettify_test.html.

Напоследок — совет. Не злоупотребляйте скриптами. Изобилующие ими страницы долго открываются, медленно прокручиваются и у многих посетителей сайта вызывают раздражение. Да и вообще это дурной тон!

P.S.: Если вы используете нечто похожее на Syntax-Highlighter'а или Javascript code prettifier, сообщите, пожалуйста, на моем сайте в комментариях. Весьма интересно об этом узнать.

Илья Муравьев, ilyuha.org.ua