22
March
2008

Подсветка синтаксиса (syntax highlighter on javascript)

Posted in: Java Web Design, J2EE, Полезные программы |

Всем привет.
Надеюсь, данная статья поможет сэкономить время владельцам веб-ресурсов, посвященным 1С Бухгалтерии и 1С Предприятию.
Проблема заключалась в том, что в интернете отсутствует какая-либо библиотека для подсвтеки синтаксиса кода. Как ни странно, она была мне очень нужна.
В итоге я принял единственно правильное решение: найти любую открытую библиотеку (желательно pure javascript) и создать для нее 1С скин.
Такая библиотека была найдена - это Syntax Highliter.

Для начала несколько слов о самой библиотеке.
Syntax Highliter - это библиотека, написанная на javascript, которая позволяет постить куски кода с подсветкой синтаксиса на интернет-ресурсах.
Реализована библиотека на основе регулярных выражений, поэтому не стоит ею злоупотреблять (50-100 строк кода будет рендериться достаточно быстро).
В данный момент поддерживаются следующие языки - C++, C#, Delphi, Java, Javascript, Php, Python, Ruby, Sql, Visual Basic, Xml, CSS. Для каждого языка выделен свой модуль, например для Java - shBrushJava.js.

Для того, чтобы заставить это работать, необходимо написать следующее у себя на странице:

    <link type='text/css' rel='stylesheet' href='css/SyntaxHighlighter.css'></link>
    <script language='javascript' src='js/shCore.js'></script>
    <script language="javascript" src='js/shBrushJava.js'></script>
    <script language='javascript'>
        dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>

Автор библиотеки рекомендует располагать код скриптов как можно ниже на странице (это связано с тем, что библиотека делает необходимые замены в DOMe HTML уже после загрузки страницы).

Код, который необходимо подсветить, нужно обрамить в тег pre (или textarea), а также указать ему имя (name) и класс (class):

    <pre name="code" class="java">
    ... some code here ...
    </pre>

Как раз по name метод HighlightAll и найдет куски кода, синтаксис которых нужно подсветить.
В общем, ничего сложного.

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

В модуле есть недостатки:
1. если после знака пунктуации сразу же идет ключевое слово без пробела, то знак пунктуации дублируется. Обход - всегда ставить пробел после знаков (даже после открывающих и закрывающих скобок).
Баг связан с тем, что в javascript отсутствует positive lookbehind. Так как я не являюсь большим специалистом ни в javascript, ни в regexp, проблему решить я так и не смог. В конце статьи вы найдете ссылку, которая может натолкнуть вас на мысли о решении этого бага.
2. вы наверное обратили внимание, что подсветка синтаксиса сделана на другой странице. Проблема в том, что блог Javenue использует UTF-8 в качестве кодировки, но опять же в связи с отсутствием знаний укротить javascript мне удалось только для кодировки windows-1251 (смотрите значение charset).

Буду очень благодарен, если вы укажете мне на решение проблем, о которых я напсиал, а также о тех, которые я возможно еще не заметил (например, отсутствие ключевых слов в модуле).

Ссылки:
Домашняя страница проекта SyntaxHighlighter
Скачать модуль SyntaxHighlighter для 1С
Имитация lookbehind в javascript


3 Comments »

RSS feed for comments on this post.



March 22, 2008 #

Может быть это поможет?
http://softwaremaniacs.org/soft/highlight/

Владик
March 22, 2008 #

Спасибо за линки, в принципе, полезная штука. Пока без необходимости, но полежит в архивах, чем черт не шутит. )

October 21, 2008 #

Использовал этот скрипт, обнаружил несколько проблем (проявляются только в IE):
1) При наведении указателя на ссылки (view plain, copy…) происходит смещение текста ссылок. Мелочь, но неприятная.
2) При обработке длинных кодов (> 100 - 150 строк) наблюдал неправильную прорисовку на экране, например, не отображались некоторые строки, нарушалась раскраска строк, нумерация строк…

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> <pre>