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.
Может быть это поможет?
http://softwaremaniacs.org/soft/highlight/
Спасибо за линки, в принципе, полезная штука. Пока без необходимости, но полежит в архивах, чем черт не шутит. )
Использовал этот скрипт, обнаружил несколько проблем (проявляются только в IE):
1) При наведении указателя на ссылки (view plain, copy…) происходит смещение текста ссылок. Мелочь, но неприятная.
2) При обработке длинных кодов (> 100 - 150 строк) наблюдал неправильную прорисовку на экране, например, не отображались некоторые строки, нарушалась раскраска строк, нумерация строк…