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

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 - деление на столбцы

© компьютерная газета