Статьи

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

Опубликовано 01/08/08 // Тэги: // Комментарии: 0

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

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

Love story

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

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

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

Этот способ подсветки я впервые заметил на портале Yahoo Developer Network, после чего сразу же сохранил одну из страниц :). В содержании .js файлов стояла ссылка, где я и нашел то, что было нужно. 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/shCore.js”></script>
<script language=“javascript” src=“js/shBrushCSS.js”></script>
<script language=“javascript” src=“js/shBrushPhp.js”></script>
<script language=“javascript” src=“js/shBrushCSharp.js”></script>
<script language=“javascript” src=“js/shBrushXml.js”></script>
<script language=“javascript”>
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>…

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

Оставить комментарий