Подсветка кода на сайтах — JavaScript решения

Когда-то давно я написал статью про подсветку кода внутри textarea. Там я привел несколько решений этой задачи. Сегодня же мы рассмотрим некоторые (естественно, что не все) решения для подсветки кода на страницах сайта. Обращаю ваше внимание, что мы рассмотрим только клиентские решения, так как они не перегружают контент лишним кодом и их использование наиболее удобно. Ну по крайней мере мне так кажется ;-)

SyntaxHighlighter

Довольно сильный инструмент. Имеет поддержку огромного количества языков, несколько тем оформления и различные расширения и дополнения. Что особо приятно, каждый язык вынесен в отдельный файл — это позволяет, во-первых, подгружать только те языки, которые нужны, а, во-вторых, (при особой надобности) дописывать интерпретаторы для недостающих языков. Единственный минус — это то, что скрипт не является XHTML валидным, точнее для его использования нужно написать невалидный код (аттрибут name не разрешен у тега pre).

Добрый человек Ларс Корнелиуссен взял и сделал из этого скрипта плагин для jQuery, заодно сделав так, что плагин можно использовать и с валидным xhtml кодом.

Google Code Prettify

Как понятно из названия, это решения от компании Гугл, которое используется, например, в Гугл сайтах. Скрипт автоматически определяет язык и подсвечивает его синтаксис. Оформление можно менять через CSS.

HighLight.js

Еще один скрипт с автоопределением языка. Имеет довольно большой список поддерживаемых языков программирования. Среди доступных на сайте расширений стоит упомянуть плагин для Файерфокса, который будет находить автоматически подсвечивать код на посматриваемых страницах.

SHJS

Этот вариант подсвечивает код только внутри тега pre (не ясно, с чем это связано). Кроме того, для каждой области с кодом нужно указывать, на каком именно языке там код. Для каждого языка существует свой js-файл и css-файл. Подгружать их можно либо руками, либо автоматически.

Chili

Плагин для jQuery. Быстрый, имеет поддержку многих популярных языков.

Lighter.js

А вот плагин для Mootools 1.2.1. Скрипту нужно сообщать, какой именно язык подсвечивать. Есть куча полезных настроек, выглядит красиво — вроде бы неплохой скрипт.

 

А каким скриптом для подсветки синтаксиса пользуетесь вы, дорогие читатели? Оставляйте ссылки, добавим в обзор.




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка