S3.Blog :: JavaScript: HighLight - подсветка синтаксиса

JavaScript: HighLight - подсветка синтаксиса

Дата последнего изменения: 20 Сентября 2009
Метки статьи: ,

- А Вы кто?
- Код, просто Код..
- А почему бесцветный?
- Меня забыли раскрасить..

Подсветка синтаксиса — выделение синтаксических конструкций текста с использованием различных цветов, шрифтов и начертаний.

Наверное существует множество вариаций на эту тему, но я нашел только четыре интересных варианта, которые, в свою очередь, были поделены на два типа: "Подсветка на выводе" и "Подсветка при наборе"

Подсветка на выводе

SyntaxHighlighter (http://alexgorbatchev.com/wiki/SyntaxHighlighter)

плюсы:	В настройках можно указать внутри какого тега подсвечивать код; Существует множество расширений, сделанных на основе SyntaxHighlighter, в том числе и для FCKEditor При наведении на подсвеченный код всплывает меню с возможностями: отобразить исходный код, распечатать, скопировать код в буфер обмена; Поддержка разных стилевых тем; Лёгкое добавление/удаление описания синтаксиса для какого-либо языка; Множество вариаций настроек подключения, которые можно задавать в классе описания тега для каждого блока в отдельности, например: <pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>
минусы:	К сожалению, отсутствует автоопределение языка;
Демонстрация:	http://alexgorbatchev.com/wiki/SyntaxHighlighter:About
Расширения:	http://alexgorbatchev.com/wiki/SyntaxHighlighter:Integration

highlight.js (http://softwaremaniacs.org/soft/highlight/)

плюсы:	Что бы подсветить синтаксис, нужно подключить всего один файл; Поддержка большого количества языков; Существуют Моды, плагины и расширения для популярных CMS; Возможность скомпилировать прямо на сайте версию с тем количеством, которые нужны именно вам; Поддержка стилей; Автоопределение языка;
минусы:	Весь код должен находиться внутри тегов <pre><code> ... </code></pre> и если у вас уже есть много статей, в которых код находится или только в <pre>...</pre> или только в <code>...</code>, но вам очень уж хочется поставить именно этот обработчик подсветки, то придется немного поковырять исходник highlight.js; Для добавления нового языка надо пересобрать и перезалить на сайт highlight.pack.js, а потом озаботится, что бы у пользователей в кэше браузера этот скрипт обновился, что, впрочем, легко достигается путем добавления в строку вызова лишнего параметра: <script type="text/javascript" src="scripts/highlight.pack.js?rnd=123456"></script>
Демонстрация:	http://softwaremaniacs.org/media/soft/highlight/test.html
Расширения:	http://softwaremaniacs.org/soft/highlight/addons/

Подсветка при наборе

CodePress (http://codepress.sourceforge.net/)

плюсы:	Автодополнение закрытия скобок " ( или [ или [ или {"; Автоопределение языка; Нумерация строк;
минусы:	Слабая реализация API
Демонстрация:	http://codepress.sourceforge.net/

CodeMirror (http://marijn.haverbeke.nl/codemirror/)

плюсы:	Нумерация строк; Возможность отображения подсветки синтаксиса вне формы редактирования; Широкие возможности настроек;
минусы:	Очень медленный: в Internet Explorer можно успеть собственными глазами увидеть как идет разрисовка кода. Но проект не заброшен и, будем надеяться, что автор в скором времени создаст достойный продукт.
Демонстрация:	http://marijn.haverbeke.nl/codemirror/jstest.html

Есть еще третий тип "подсветки синтаксиса": программы, которые раскрашивают код на стороне сервера, непосредственно перед отдачей сайта пользователю. Но это уже, так сказать, для профессионалов :)
Раскрашивание на стороне сервера считается самым универсальным решением, так как разработчик сайта может сам определить какие именно блоки и каким образом раскрасить. Ну и естественно тут еще несомненный плюс в том, что раскрасив код этим способом, страничка сайта не нагружается всевозможними посторонними javascript-библиотеками и не зависит от того какой браузер стоит у отдельно взятого пользователя.

Вот один из примеров такого решения: Code2HTML (http://www.palfrader.org/code2html/)
Плюсы и минусы тут расписывать бесполезно, потому что для конечного пользователя производимая работа не видна, а то что получается после "конвертации" вполне сопоставимо с результатами выше описанных программ.
Скорее всего автор сделал проект для каких-то своих потребностей, ну и заодно и всему миру предложил воспользоваться своей разработкой.
Демонстрация программы тут: http://www.palfrader.org/code2html/code2html.html
Проект написан на Perl, поэтому разработчикам, владеющим этим языком, не трудно будет, взяв отсюда исходник: http://www.palfrader.org/code2html/examples.perl.html , вычленить самую суть и внедрить к себе в проект.

Если по каким-либо причинам сайты разработчиков описанных программ будут не доступны, то вы можете их скачать отсюда: