Кнопка вставки кода и подсветка синтаксиса в CKEditor

mbaev 15.10.2016, 13:08

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

До недавнего времени с этим было сложно - приходилось устанавливать модули codefilter, geshifilter, как-то настраивать их в обход багов. Но теперь такая возможность есть и она активно используется на этом блоге, а теперь доступна и в комментариях.

Реализация достаточно простая и занимает, в общей сложности, от 5 до 20 минут, в зависимости от опыта и знаний настройщика.

Необходимые модули

Начнем с установки необходимых модулей:

  • GeSHi Filter for syntax highlighting. Известный многим, модуль, который позволяет подсвечивать синтаксис огромного количества языков. (на момент написания статьи, я использовал версию 8.x-1.0-beta1)

  • CodeButton. Модуль существует только в песочнице. Поэтому его можно клонировать с помощью гита:

    1. git clone 'git://git.drupal.org/sandbox/alex43210/2427449.git'

    или скачать мою, честно-ворованную и улучшенную версию: CodeButton

Настройка

Настройка состоит из двух частей:

  1. Настройка модуля GeSHi Filter for syntax highlighting
  2. Настройка текстового формата

Для начала, включаем модули на странице admin/modules
enable-modules

 

Настройка модуля GeSHi Filter for syntax highlighting

Дальше набираем список языков, которые будут доступны в CKEditor'е для подсветки синтаксиса.

Список всех доступных языков можно найти по ссылке /admin/config/content/formats/geshifilter/languages/all.

geshifilter-languages

Выставляем правильную конфигурацию для geshifilter по адресу admin/config/content/formats/geshifilter
(отмеченные настройки должны быть в таком положении).
geshifilter-settings

 

Настройка текстового формата

По пути admin/config/content/formats выбираем текстовый формат, в котором мы хотим, чтобы была доступна кнопка вставки кода. Например, Restricted HTML.

text-formats

Находим и двигаем кнопку вставки кода в любое понравившееся место на панели редактора.

move-code-button

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

Устанавливаем настройки текстового формата.

Важно! Если кроме прочего у вас включён фильтр тегов, то необходимо добавить в Допустимые HTML-теги, тег pre: <pre type lang class="">

filter-settings

На этом все, можно пользоваться.

Результат

add-code add-comment comment-code-result

Вложение
Profile picture for user Гость

Гость , ,

  1. /**
  2.  * @file
  3.  * The PHP page that serves all page requests on a Drupal installation.
  4.  *
  5.  * All Drupal code is released under the GNU General Public License.
  6.  * See COPYRIGHT.txt and LICENSE.txt files in the "core" directory.
  7.  */
  8.  
  9. use Drupal\Core\DrupalKernel;
  10. use Symfony\Component\HttpFoundation\Request;
  11.  
  12. $autoloader = require_once 'autoload.php';
  13.  
  14. $kernel = new DrupalKernel('prod', $autoloader);
  15.  
  16. $request = Request::createFromGlobals();
  17. $response = $kernel->handle($request);
  18. $response->send();
  19.  
  20. $kernel->terminate($request, $response);