S3.Blog

23 Сентября 2017
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

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

Дата последнего изменения: 20 Сентября 2009
Метки статьи: Готовые решения, JavaScript
- А Вы кто?
- Код, просто Код..
- А почему бесцветный?
- Меня забыли раскрасить..
 




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

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

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

    • 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 , вычленить самую суть и внедрить к себе в проект.


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




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


Похожие материалы:




Гриша (гость) • ответить
Перевел статью со сравнительным анализом нескольких скриптов подсветки. Возможно будет интересно. 5 скриптов подсветки синтаксиса.

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.