WEB Рукоделие

21 июля 2008 г.

Раскраска гениальных строчек

Обновился скрипт Ивана Сагалаева и Ко, подсвечивающий синтаксис в блоках кода, публикуемых в блогах, форумах и т.д. Изменение, не слишком для меня важное, – теперь подсвечивается еще и код на Lisp’е.

Скрипт полезен тем, что подсвечивает синтаксис уже после генерации страницы – это важно, если исходный текст страницы набран с помощью, например, wiki-синтаксиса или, например BB-кода. Также скрипт отлично работает на блогохостингах, например на Blogger, движок которых не имеет функции подсветки синтаксиса и не позволяет добавлять различные плагины. highlight.js вполне может быть расположен на совсем другом сервере, это не помешает его работе.

Подключить highlight.js к Blogger’у очень просто. Самое сложное – найти сервер, на который можно положить собственно сам файл со скриптом. Самые отчаянные могут попробовать использовать скрипт с «чужого» сервера, но это чревато – владелец в любой момент может изменить его расположение или убрать подсветку синтаксиса ненужных ему языков.

После того, как для файла со скриптом нашлось место надо внести небольшие изменения в шаблон Blogger’а. Для этого заходим в настройки блога, раздел Макет->Изменить HTML и ищем в шаблоне строчку с тэгом ‘body’. И после нее добавляем строчки подключения и запуска скрипта. Примерно это будет выглядеть так:

<script src="http://www.mysite.net/js/highlight.js" type="text/javascript" />
<script type="text/javascript">
  initHighlightingOnLoad();
</script>

Все. Работает. Не подсвечивается синтаксис? Нужно еще определить стили. Можно воспользоваться стилевыми файлами «из коробки», можно написать свои. Файл со стилями, если совсем лениво, можно положить на тот же сервер, на котором расположен highlight.js и подключить его дописав строчку

<link href="http://www.mysite.net/js/styles/default.css"
media="screen" rel="stylesheet" type="text/css" />

до закрывающего тэга </head> или просто скопипастить содержимое css файла к остальным стилям шаблона.

Скачать highlight.js

Update: Как только что выяснилось, html не хочет подсвечиваться, если в коде для значений атрибутов тэгов используются апострофы, а не кавычки :-) Будем ждать очередную версию.