Развитие highlight.js

Вчера завернул версию 3.5 highlight.js, процитирую себя же:

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

А также добавлен новый язык — XML. Раньше произвольный XML определялся как HTML и в нем, соответственно, не подсвечивались теги. Теперь я постарался, чтобы в большинстве реальных случаев "чистый" XML обрабатывался по своим правилам. В которых, кстати, есть такие вещи как CDATA и processing instructions (<? ... ?>).

И в связи с этой новой версией хочу посоветоваться, что делать с программой дальше.

Скрипт развивается довольно давно, и мои собственные потребности он, в общем-то, давно уже удовлетворяет и даже перекрывает. Мне очень нравится, что когда я пишу в блоге код, я либо просто пишу его, либо копирую готовый — и все. Никаких дополнительных действий по оформлению не требуется. С точки зрения вида кода на странице меня тоже вроде все устраивает: код подсвечивается быстро, читается хорошо, выделяется, копируется, стиль меняется вместе с дизайном блога.

Теперь я хочу попросить у вас идей, чего бы еще такого полезного к нему прикрутить :-). Фичеризмом, то есть, заняться, хочу.

Однако мне, уж простите, придется сразу "придушить" несколько наиболее часто упоминаемых вещей :-). У highlight.js есть определенная философия, которая отличает его от других хороших скриптов схожей направленности. Самая главная цель этого скрипта — улучшить читаемость кусков кода на веб-страницах. Отсюда вытекает пара особенностей:

В сравнении с многими другими скриптами детальность расцветки можно назвать скудной. Я считаю, что отдельная подсветка кавычек вокруг строк, точек с запятой и буквы "x" внутри шестнадцатеричных цифр ни разу не помогает воспринимать код.
У блоков кода нет нумерации строк, переключающихся режимов отображения и кнопок копирования в буфер обмена. Это, на мой взгляд, тоже излишества.

В остальном мне хочется послушать идей!

P.S. Кстати, я недавно открыл svn-репозиторий на чтение: svn://softwaremaniacs.org/highlight. Вдруг кому интересно.

P.P.S. Еще не могу не поделиться очень повеселившей меня заметкой в блоге "Script magazine". Нескромно версии нумеруете, Иван Григорьевич, нескромно :-)

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

Boo

Может быть стоит подсвечивать такие символы, как "+", "-", "=", ":", "(", ")" ?

MajestiC

Подсветку Brainfuck =)

dp_wiz

Предлагаю добавить kitchensink (8

Иван Сагалаев

Такой: http://www.mozilla.org/docs/web-developer/samples/kitchensink.xml? :-)

Сергей

Изменять цвет фона блока(я честно говоря не нашёл в примерах, может в стилях не заметил). Встроенные подписи к коду (вроде пример 1. пример 2.) или заголовок(хотя это может быть и не нужно зачастую, но было бы приятно).

Иван Сагалаев

Изменять цвет фона блока

По какому принципу? В смысле, по наведению мышки, или в зависимости от языка? Эти две вещи, кстати, и так можно делать, для этого CSS'а хватает.

или заголовок

А что будет заголовком?

dark-demon

динамическую подсветку по мере набора :-Ъ

zencd

При включении highlight.js в глобальное пространство имён добавляется 16 переменных и 12 функций; идея заключается в том чтобы почти всё это совсем спрятать внутри библиотеки.

Евгений

Это, конечно, серьёзно увеличит размеры кода, но можно было бы делать имена известных функций ссылками на соответствующую документацию. Но это, конечно, серьёзно увеличит размеры кода :)

Flack

Подсветку XSL еще бы. Может не лень кому?

Alexander Solovyov

У блоков кода нет нумерации строк, переключающихся режимов отображения

Слава всем демонам интернета!

А дополнительные фичи не замедлят его? ;) Самое главное - скорость работы. :]

Mourner

Поддерживаю zencd, нужно бы спрятать это всё как следует.

xonix

Такая вот глупая идея.. В Windows есть cscript (wscript), можно в highlights.js добавить небольшой код, который бы позволил ему кроме прочего запускаться из командной строки (например, для пакетной обработки кода, генерации расцвеченного хтмл-я).

Densetsu no Ero-sennin

Я может, глупый вопрос задаю, но чем не устраивает раскраска скриптов на стороне сервера? Инструментов для этого миллион, pygments хотя бы.

Иван Сагалаев

Ну почему же не устраивает. У каждого подхода своя применимость, и мне клиентский расцветчик нравится по нескольким причинам. В частности, я могу его использовать здесь в WordPress'овском блоге, в punbb'шном форуме, в джанговской части сайта и в новом джанговском форуме. Будь это серверное решение, мне оно понадобилось бы в вариантах минимум на двух языках. То есть, серверных языков много, а вот Javascript везде один. Также клиентский расцветчик позволяет использовать его на чужих сайтах, оформив его в виде расширения для Firefox'а или юзерского скрипта для Оперы. Расширение для Firefox'а уже давно сделал Петр Леонов, ссылка лежит на странице программы.

Но на самом деле, главное здесь не то, что он на Javascript'е. Главная фича — это все таки автоопределение языка. Ради только этого одного уже стоило начинать возиться :-)

kikaha

Сорри, если что-то пропустил, не очень внимательно смотрю за проектом...
Если уж фичи - так могучие, и подключаемые, имхо. Например, добавить выравнивание мусорного кода - для php это в принципе несложно нарисовать, а то мой в детстве горячо любимый phpCodeBeautifier до сих пор с кириллицей не дружит, и ценные комменты в коде убиваются.

Sancho Basancho

Не знаю может глупо - как на счет фолдинга?

Ирина

Очень помогают Ваши материалы, спасибо, Иван! А нет возможности сделать поиск по слову или по фразе? И что-то наподобие гостевой, где можно задать подобные вопросы, не относящиеся к конкретной статье. Или может у Вас есть не только этот блог, но и полноценный сайт?

Иван Сагалаев

Поиск — легко: http://www.google.com/search?q=%D1%84%D1%80%D0%B0%D0%B7%D0%B0+site%3Asoftwaremaniacs.org

Сайт действительно есть, достаточно убрать "/blog/" из адреса. А чтобы пообсуждать что-нибудь, есть форум. А если там нет подходящих тем — то почтой.

Александр Соловьёв

Вопщем, я придумал фичу. Добавлять информацию о языке в тултип, можно настраиваемо. :) Это можно сделать и отдельным скриптом, но зачем ещё раз разбираться кто где? :)

P.S. Хм, а предпросмотр - аяксом сделан?

Иван Сагалаев

Про tooltip — интересно, запишу.

А предпросмотр — это Showdown, я о нем писал когда-то. Дошли вот руки прикрутить.

Тимур Вафин

Интересует алгоритм определения языка. Мне было бы интересно портировать его на ruby.
Если есть уже готовое решение, то подскажите пожалуйста?

Alexander Solovyov

Интересует алгоритм определения языка.

Так на странице программы упомянуто ведь, как это делается (я о том, какая там эвристика), а, порывшись в коде, можно и логику всю увидеть.

Иван Сагалаев

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

Alexander Solovyov

На самой странице очень неподробно, на самом деле.

Это да, но код - лучшая документация. ;) Хотя да, почитать в словах было бы интересно. Такую бы штуку к pygments прикрутить, специально для тех, кто думает что JS - это не тру. ;)

Тимур Вафин

2Иван Сагалаев: т.е. нет итогового алгоритма с определенной долей вероятности определяющей что за язык нам подсунули?

Иван Сагалаев

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

Денис Зайцев

В порядке общего бреда :)

Использовать для настройки подсветки синтаксиса файлы от SciTE.

Потому что там уже полно всяких языков... возможно что-то есть даже в scintilla, но я не нашел.

Иван Сагалаев

Определения языков от разных других сред и редакторов мне не пойдут по определению, потому что там эвристики нет. А вот иметь именно несколько преднастроенных варианто цветов из других редакторов — это идея. Она даже была у меня когда-то, но была откинута за муторностью :-).

Впрочем, может сообщество поможет? :-).

eagleas

Небольшая бага XML-части:
В имени тегов могут быть цифры и точки, если я не ошибаюсь, то стандартом это допустимо, все известные мне парсеры вроде едят.

...{
      className: 'title',
      begin: '[A-Za-z0-9\.]+', end: '^',
      relevance: 0
    },

Иван Сагалаев

Спасибо! Залез в стандарт, сделал почти как там. Почти, потому что определять расширенные юникодные символы очень лениво, а на практике они крайне редко используются. В итоге так:

[A-Za-z:_][A-Za-z0-9\\._:-]+

Выложу в следующей версии.

Владимир

Иван, огромное вам спасибо! :) Добвил highlight к себе на форум, все клево )

jkeks

Чессно говоря я приверженец универсальных вещщей и хотел было написать небольшой скрипт натипа этого, но только без поддержки всяких языков, это лишь нагружает лишним, для более легкого понимания код, достаточно разукрасить код, выделив стоп символы, фразы, то что в кавычках и все пожалуй, можно русские символы отдельно затмить. 8)
Дальше надо в красивый блок обернуть и чтобы этот блок горизонтально мог скроллиться, и то уже номера строк - просто ни к чему, хотя можно и сделать.
Красота и никаких дурацких НЕПРАВИЛЬНЫХ языковых оберток не нужно, все равно глючные будут, тормозить и грузиться будут. Надо согласиться с тем, что ПРАВИЛЬНУЮ подсветку даже одного языка сделать не так просто, всегда можно докопаться до "sdfsd\"sdf" или "sdfs\";dsff"asda\"; Поэтому рекомендую свой веломобиль переделать в велосипед. 8)))

Нумерация строк

[...] В рамках самого плагина не хочу: http://softwaremaniacs.org/blog/2007/09/10/highlight-js-evolution/ [...]

Иван Сагалаев

Нет, и это намеренно: http://softwaremaniacs.org/blog/2007/09/10/highlight-js-evolution/

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

Boo

Может быть стоит подсвечивать такие символы, как "+", "-", "=", ":", "(", ")" ?
MajestiC

Подсветку Brainfuck =)
dp_wiz

Предлагаю добавить kitchensink (8
Иван Сагалаев

Такой: http://www.mozilla.org/docs/web-developer/samples/kitchensink.xml? :-)
Сергей

Изменять цвет фона блока(я честно говоря не нашёл в примерах, может в стилях не заметил). Встроенные подписи к коду (вроде пример 1. пример 2.) или заголовок(хотя это может быть и не нужно зачастую, но было бы приятно).
Иван Сагалаев

Изменять цвет фона блока

По какому принципу? В смысле, по наведению мышки, или в зависимости от языка? Эти две вещи, кстати, и так можно делать, для этого CSS'а хватает.

или заголовок

А что будет заголовком?
dark-demon

динамическую подсветку по мере набора :-Ъ
zencd

При включении highlight.js в глобальное пространство имён добавляется 16 переменных и 12 функций; идея заключается в том чтобы почти всё это совсем спрятать внутри библиотеки.
Евгений

Это, конечно, серьёзно увеличит размеры кода, но можно было бы делать имена известных функций ссылками на соответствующую документацию. Но это, конечно, серьёзно увеличит размеры кода :)
Flack

Подсветку XSL еще бы. Может не лень кому?
Alexander Solovyov

У блоков кода нет нумерации строк, переключающихся режимов отображения

Слава всем демонам интернета!

А дополнительные фичи не замедлят его? ;) Самое главное - скорость работы. :]
Mourner

Поддерживаю zencd, нужно бы спрятать это всё как следует.
xonix

Такая вот глупая идея.. В Windows есть cscript (wscript), можно в highlights.js добавить небольшой код, который бы позволил ему кроме прочего запускаться из командной строки (например, для пакетной обработки кода, генерации расцвеченного хтмл-я).
Densetsu no Ero-sennin

Я может, глупый вопрос задаю, но чем не устраивает раскраска скриптов на стороне сервера? Инструментов для этого миллион, pygments хотя бы.
Иван Сагалаев

Ну почему же не устраивает. У каждого подхода своя применимость, и мне клиентский расцветчик нравится по нескольким причинам. В частности, я могу его использовать здесь в WordPress'овском блоге, в punbb'шном форуме, в джанговской части сайта и в новом джанговском форуме. Будь это серверное решение, мне оно понадобилось бы в вариантах минимум на двух языках. То есть, серверных языков много, а вот Javascript везде один. Также клиентский расцветчик позволяет использовать его на чужих сайтах, оформив его в виде расширения для Firefox'а или юзерского скрипта для Оперы. Расширение для Firefox'а уже давно сделал Петр Леонов, ссылка лежит на странице программы.

Но на самом деле, главное здесь не то, что он на Javascript'е. Главная фича — это все таки автоопределение языка. Ради только этого одного уже стоило начинать возиться :-)
kikaha

Сорри, если что-то пропустил, не очень внимательно смотрю за проектом...
Если уж фичи - так могучие, и подключаемые, имхо. Например, добавить выравнивание мусорного кода - для php это в принципе несложно нарисовать, а то мой в детстве горячо любимый phpCodeBeautifier до сих пор с кириллицей не дружит, и ценные комменты в коде убиваются.
Sancho Basancho

Не знаю может глупо - как на счет фолдинга?
Ирина

Очень помогают Ваши материалы, спасибо, Иван! А нет возможности сделать поиск по слову или по фразе? И что-то наподобие гостевой, где можно задать подобные вопросы, не относящиеся к конкретной статье. Или может у Вас есть не только этот блог, но и полноценный сайт?
Иван Сагалаев

Поиск — легко: http://www.google.com/search?q=%D1%84%D1%80%D0%B0%D0%B7%D0%B0+site%3Asoftwaremaniacs.org

Сайт действительно есть, достаточно убрать "/blog/" из адреса. А чтобы пообсуждать что-нибудь, есть форум. А если там нет подходящих тем — то почтой.
Александр Соловьёв

Вопщем, я придумал фичу. Добавлять информацию о языке в тултип, можно настраиваемо. :) Это можно сделать и отдельным скриптом, но зачем ещё раз разбираться кто где? :)

P.S. Хм, а предпросмотр - аяксом сделан?
Иван Сагалаев

Про tooltip — интересно, запишу.

А предпросмотр — это Showdown, я о нем писал когда-то. Дошли вот руки прикрутить.
Тимур Вафин

Интересует алгоритм определения языка. Мне было бы интересно портировать его на ruby.
Если есть уже готовое решение, то подскажите пожалуйста?
Alexander Solovyov

Интересует алгоритм определения языка.

Так на странице программы упомянуто ведь, как это делается (я о том, какая там эвристика), а, порывшись в коде, можно и логику всю увидеть.
Иван Сагалаев

На самой странице очень неподробно, на самом деле. Я могу написать отдельным постом про это, если кому интересно. Но насчет портирования хочу заметить сразу, что самого алгоритма взвешивания языков отдельно не существует — это все работает на побочных эффектах самой раскраски. Поэтому портировать надо будет все целиком.
Alexander Solovyov

На самой странице очень неподробно, на самом деле.

Это да, но код - лучшая документация. ;) Хотя да, почитать в словах было бы интересно. Такую бы штуку к pygments прикрутить, специально для тех, кто думает что JS - это не тру. ;)
Тимур Вафин

2Иван Сагалаев: т.е. нет итогового алгоритма с определенной долей вероятности определяющей что за язык нам подсунули?
Иван Сагалаев

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

В порядке общего бреда :)

Использовать для настройки подсветки синтаксиса файлы от SciTE.

Потому что там уже полно всяких языков... возможно что-то есть даже в scintilla, но я не нашел.
Иван Сагалаев

Определения языков от разных других сред и редакторов мне не пойдут по определению, потому что там эвристики нет. А вот иметь именно несколько преднастроенных варианто цветов из других редакторов — это идея. Она даже была у меня когда-то, но была откинута за муторностью :-).

Впрочем, может сообщество поможет? :-).
eagleas
Небольшая бага XML-части:
В имени тегов могут быть цифры и точки, если я не ошибаюсь, то стандартом это допустимо, все известные мне парсеры вроде едят.
```
...{
      className: 'title',
      begin: '[A-Za-z0-9\.]+', end: '^',
      relevance: 0
    },
```
Иван Сагалаев
Спасибо! Залез в стандарт, сделал почти как там. Почти, потому что определять расширенные юникодные символы очень лениво, а на практике они крайне редко используются. В итоге так:
```
[A-Za-z:_][A-Za-z0-9\\._:-]+
```
Выложу в следующей версии.
Владимир

Иван, огромное вам спасибо! :) Добвил highlight к себе на форум, все клево )
jkeks

Чессно говоря я приверженец универсальных вещщей и хотел было написать небольшой скрипт натипа этого, но только без поддержки всяких языков, это лишь нагружает лишним, для более легкого понимания код, достаточно разукрасить код, выделив стоп символы, фразы, то что в кавычках и все пожалуй, можно русские символы отдельно затмить. 8)
Дальше надо в красивый блок обернуть и чтобы этот блок горизонтально мог скроллиться, и то уже номера строк - просто ни к чему, хотя можно и сделать.
Красота и никаких дурацких НЕПРАВИЛЬНЫХ языковых оберток не нужно, все равно глючные будут, тормозить и грузиться будут. Надо согласиться с тем, что ПРАВИЛЬНУЮ подсветку даже одного языка сделать не так просто, всегда можно докопаться до "sdfsd\"sdf" или "sdfs\";dsff"asda\"; Поэтому рекомендую свой веломобиль переделать в велосипед. 8)))
Нумерация строк

[...] В рамках самого плагина не хочу: http://softwaremaniacs.org/blog/2007/09/10/highlight-js-evolution/ [...]
Иван Сагалаев

Нет, и это намеренно: http://softwaremaniacs.org/blog/2007/09/10/highlight-js-evolution/