Помощь начинающим веб
разработчикам

Syntax highlighter подсветка синтаксиса в drupal 7

20.08.2012

На программных форумах (т.е. на тех на которых выкладывают программные коды, для какого то языка программирования) часто встречается подсветка синтаксиса. Если вы являетесь веб разработчиком, то вы наверняка сами используете такие программы для написания кода, так как это,- согласитесь очень удобно. Drupalfly.ru – не является исключением, и мы так же используем эту технологию. У нас это выглядит вот так:

Данный код написан на php, где каждая строчка кода пронумерована, переменные - выделены оранжевым цветом, обозначение массива – красным, данные в массиве

Модуль syntax highlighter состоит из 2х компонентов:

1.Сам модуль (скачать можно здесь)

2.Библиотека для работы модуля (скачать можно здесь)

Первым делом скачиваем всё выше перечисленное. Устанавливаем модуль, как это сделать можно почитать вот здесь, не будем на этом заострять внимание. Уточню, что модуль у вас не активируется до тех пор пока вы не предоставите ему для работы необходимую библиотеку, поэтому помещаем скаченную выше папку в каталог на вашем сервере:

  1. sites/all/libraries

Полный путь к вашей библиотеки должен выглядеть вот так:

  1. sites/all/libraries/syntaxhighlighter

После проделанного идём активировать модуль – syntax highlighter. В пункте модули ставим галочку напротив syntax highlighter и сохраняем настройки. Если модуль успешно подцепил библиотеку, то ни каких ошибок появиться не должно.

Далее идём в раздел Конфигурация и ищем пункт syntax highlighter

И переходим к настройкам модуля.

Давайте разберемся по пунктам, первое что нам предлагают это выбрать – для каких языков программирования применять данную библиотеку, так как наша с вами работа больше связана с веб разработками – то и языки выбираем соответствующие, а именно расставляем галочки напротив необходимых языков.

Дальше нам предлагается какую применять тему оформления, здесь вы можете поиграть сами с настройками и выбрать понравившийся. Ну а подкорректировать любую тему из списка можно через CSS.

Теперь необходимо определиться для какого тега HTML необходимо применять подсветку синтаксиса, по умолчанию там написан тег pre – не будем его менять. Уточню, что если вы все таки заходите допустим сменить его на тег code, то записывать нужно без угловых скобок , иначе подсветка не подцепиться.

Дальше идёт перечисление тех страниц сайта, к которым не стоит применять данный модуль

И теперь сохраняем настройки.

Посмотрим что у нас получилось, создадим материал внутри которого будет располагаться какой то код, пусть будет php, напишем элементарное действие сложения

Но если вы сейчас его сохраните, то выглядеть оно будет примерно вот так:

Как мы видим ни какой синтаксис не подцепился. А дело в том что данный код располагается не внутри указанного нами тега pre. А теперь сделаем по правилам:

Разместили код между тегами pre, и кроме этого необходимо ещё и добавить класс brush, после двоеточия которого нужно указывать язык программирования – в данном случае это php. Если бы у вас был xml, то класс записывался бы как brush:xml. Не забывайте про этот момент. Теперь смотрим что у нас получилось

Как мы видим всё у нас сработало именно так как нам нужно. На этом всё.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (6)

Profile picture for user Артур
Den
10.02.2014

А как быть с тем, что заменился на

Profile picture for user pantey
pantey
10.02.2014

использовать спецсимволы html

 &lt и &gt

, что в свою очередь дадут такой результат

<?php echo "Test"; ?>
Profile picture for user Артур
Den
10.02.2014

чет не получается написать мысль. Короче как бороться с тем, что добавляется комментирование?

Profile picture for user Артур
Den
10.02.2014

Точно! Благодарю! Павел, а о настройке редактора BUEditor есть какие то статьи?

Profile picture for user pantey
pantey
10.02.2014

у меня вроде нет...

Profile picture for user Артур
admin
29.11.2018

НИ хя не работает, модуль даже не активируется, разработчик модуля гандон заставляет нервничать!!!!!!

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

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии