Подсветка синтаксиса с CodeMirror и WordPress

8 мин. чтения

О применении JavaScript библиотеки CodeMirror совместно с CMS WordPress и её интеграции в WordPress проэкты (темы и плагины).

CodeMirror — это компонент JavaScript, который предоставляет редактор кода в браузере. Когда доступен модуль (mode) для нужного языка, то он будет раскрашивать ваш код (подсветки синтаксиса) и опционально помогать с отступом.

Сборка CodeMirror

В начале нужно собрать каталог CodeMirror с нужными модулями и если надо темами и аддонами. Делается это просто. Для этого нужно скачать архив CodeMirror с сайта разработчика (https://codemirror.net) и удаляя из него лишнее оставить только нужное.

Минимально необходимый набор:

Каталог lib с файлами codemirror.js и codemirror.css.
Каталог mode с нужными модами (только js файлы).
Каталоги theme и addon нужны в случае использования тем или аддонов.
В случае публикации вашего проекта нужно использовать файлы LICENSE и README.md.

Я приведу пример подсветки синтаксиса языков HTML и PHP. А нужные вам моды вы можете определить на этой странице руководства.

Понадобится ещё два файла (config.js, customestyle.css) о которых Я скажу позже.

Теперь всё это нужно разместить в каталоге с названием codemirror в корне проэкта. В результате собранный каталог должен выглядеть примерно так:

codemirror-.
           |--lib--.
           |       |--codemirror.js
           |       '--codemirror.css
           |
           |--mode-.
           |       |--xml.js
           |       |--javascript.js
           |       |--css.js
           |       |--htmlmixed.js
           |       |--clike.js
           |       '--php.js
           |
           |--theme-.
           |        '--default.css
           |
           |--addon-.
           |        '--
           |
           |--LICENSE
           |--README.md
           |--config.js
           '--customestyle.css

Загрузка скриптов CodeMirror

Необходимо загрузить скрипты CodeMirror (те которые созданы в предыдущем пункте) в header страниц/ы. Для это в WordPress имеется cпециальная функция _enqueue_scripts загрузки скриптов и стилей в header страниц.

Пример загрузки скриптов с регистрацией:

                                /**
 * Register and enqueue the CodeMirror scripts and styles
 */
function enqueue_codemirror_scripts($hook) {

    if ( 'appearance_page_my-custom-functions' != $hook ) {
        return;
    }

    // Registering scripts
    wp_register_script('codemirror', plugin_dir_url(__FILE__) . 'codemirror/lib/codemirror.js');
    wp_register_script('codemirror_xml', plugin_dir_url(__FILE__) . 'codemirror/mode/xml.js');
    wp_register_script('codemirror_javascript', plugin_dir_url(__FILE__) . 'codemirror/mode/javascript.js');
    wp_register_script('codemirror_css', plugin_dir_url(__FILE__) . 'codemirror/mode/css.js');
    wp_register_script('codemirror_htmlmixed', plugin_dir_url(__FILE__) . 'codemirror/mode/htmlmixed.js');
    wp_register_script('codemirror_clike', plugin_dir_url(__FILE__) . 'codemirror/mode/clike.js');
    wp_register_script('codemirror_php', plugin_dir_url(__FILE__) . 'codemirror/mode/php.js');
    wp_register_script('codemirror_config', plugin_dir_url(__FILE__) . 'codemirror/config.js');
    wp_register_style('codemirror_style', plugin_dir_url(__FILE__) . 'codemirror/lib/codemirror.css');
    wp_register_style('codemirror_customestyle', plugin_dir_url(__FILE__) . 'codemirror/customestyle.css');

    // Enqueue scripts
    wp_enqueue_script('codemirror');
    wp_enqueue_script('codemirror_xml');
    wp_enqueue_script('codemirror_javascript');
    wp_enqueue_script('codemirror_css');
    wp_enqueue_script('codemirror_htmlmixed');
    wp_enqueue_script('codemirror_clike');
    wp_enqueue_script('codemirror_php');
    wp_enqueue_script('codemirror_config');
    wp_enqueue_style('codemirror_style');
    wp_enqueue_style('codemirror_customestyle');

}
add_action( 'admin_enqueue_scripts', 'enqueue_codemirror_scripts' );

                            

И без регистрации (если нет необходимости в регистрации):

                                /**
 * Enqueue the CodeMirror scripts and styles
 */
function enqueue_codemirror_scripts($hook) {
    if ( 'appearance_page_my-custom-functions' != $hook ) {
        return;
    }

    wp_enqueue_script('codemirror', plugin_dir_url(__FILE__) . 'codemirror/lib/codemirror.js');
    wp_enqueue_script('codemirror_xml', plugin_dir_url(__FILE__) . 'codemirror/mode/xml.js');
    wp_enqueue_script('codemirror_javascript', plugin_dir_url(__FILE__) . 'codemirror/mode/javascript.js');
    wp_enqueue_script('codemirror_css', plugin_dir_url(__FILE__) . 'codemirror/mode/css.js');
    wp_enqueue_script('codemirror_htmlmixed', plugin_dir_url(__FILE__) . 'codemirror/mode/htmlmixed.js');
    wp_enqueue_script('codemirror_clike', plugin_dir_url(__FILE__) . 'codemirror/mode/clike.js');
    wp_enqueue_script('codemirror_php', plugin_dir_url(__FILE__) . 'codemirror/mode/php.js');
    wp_enqueue_script('codemirror_php', plugin_dir_url(__FILE__) . 'codemirror/config.js');
    wp_enqueue_style('codemirror_style', plugin_dir_url(__FILE__) . 'codemirror/lib/codemirror.css');
    wp_enqueue_style('codemirror_style', plugin_dir_url(__FILE__) . 'codemirror/customestyle.css');

}
add_action( 'admin_enqueue_scripts', 'enqueue_codemirror_scripts' );

                            

Для плагина пути к скриптам указываются с помощью plugin_dir_url():

                                wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );

                            

А для темы с помощью get_template_directory_uri():

                                wp_enqueue_script( 'my_custom_script', get_template_directory_uri( __FILE__ ) . 'myscript.js' );

                            

Примечание: myscript.is - это название нужного файла.

В зависимости от цели, скрипты можно загружать на всех страницах вэб-сайта, на всех страницах админки или на определённой странице.

Загрузка скриптов на всех страницах веб-сайта:

                                function enqueue_codemirror_scripts() {

    // Enqueue scripts
    ...

}
add_action( 'wp_enqueue_scripts', 'enqueue_codemirror_scripts' );

Загрузка скриптов на всех страницах админки:

                                function enqueue_codemirror_scripts() {

    // Enqueue scripts
    ...

}
add_action( 'admin_enqueue_scripts', 'enqueue_codemirror_scripts' );

Загрузка скриптов на определённой странице (в моём примере это страница edit.php):

                                function enqueue_codemirror_scripts($hook) {
    if ( 'edit.php' != $hook ) {
        return;
    }

    // Enqueue scripts
    ...

}
add_action( 'admin_enqueue_scripts', 'enqueue_codemirror_scripts' );

                            

Примечание: Название страницы можно увидеть в адресной строке.

Но если вам нужна страница темы то это будет немного сложнее.

Название страницы темы можно определить по такой схеме:

themes.php?page={page}
=>
appearance_page_{page}

Тоесть, если адрес нужной страницы такой:

themes.php?page=my-page.php

То название будет appearance_page_my-page.

Настройки

Вся настройка CodeMirror производится из конфигурационного файла config.js. Этот файл нужно создать и поместить в него следующее содержимое:

                                // Configuration file for CodeMirror v1.0

  var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('CodeMirror'), {
     lineNumbers: true,
     matchBrackets: true,
     mode: 'application/x-httpd-php',
     indentUnit: 4
  });

                            

Примечание: Используется синтаксис JavaScript.

Настройки задаются в виде опций переменной myCodeMirror.

Значения опций из моего примера:

lineNumbers: true,                 // Показывать номера строк.
matchBrackets: true,               // Подсвечивать парные скобки.
mode: "application/x-httpd-php",   // Режим подсветки.
indentUnit: 4                      // Размер табуляции (длина отступа в пробелах).

Об остальных опциях можно узнать на странице руководства: https://codemirror.net/doc/manual.html#config

Примечание: Строки с опциями, кроме последней, должны заканчиваться запятыми.

Стили

Для применения своих стилей отображения нужно создать файл customestyle.css.

Пример содержания файла customestyle.css:

                                  .CodeMirror {
     border: 1px solid cornflowerblue;
     height: auto;
  }

                            

Примечание: Используется синтаксис CSS.

Обрабатываемое поле

Теперь последний пункт. Нужно указать CodeMirror’у область для обработки кода. Это делается с помощью HTML тэга <textarea> (текстовое поле) с id - CodeMirror. Тоесть, на нужных страницах, подсвечиваемый код нужно обернуть в этот тэг, например так:

                                <textarea cols="50" rows="10" id="CodeMirror" >
</textarea>

Эпилог

Если весь код разместить на одной HTML странице то он будет выглядеть так:

                                ...
   <script src="codemirror/lib/codemirror.js"></script>
   <script src="codemirror/mode/xml.js"></script>
   <script src="codemirror/mode/javascript.js"></script>
   <script src="codemirror/mode/css.js"></script>
   <script src="codemirror/mode/htmlmixed.js"></script>
   <script src="codemirror/mode/clike.js"></script>
   <script src="codemirror/mode/php.js"></script>
   <link rel="stylesheet" href="codemirror/lib/codemirror.css">
   <link rel="stylesheet" href="codemirror/theme/default.css">
</head>
<body>
   <div id="container">
      <textarea cols="50" rows="10" id="code" ></textarea>
   </div>
   <script type="text/javascript" language="javascript">
     var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('code'), {
        lineNumbers: true,
        matchBrackets: true,
        mode: 'application/x-httpd-php',
        indentUnit: 4
     });
   </script>
   <style>
     .CodeMirror {
        border: 1px solid cornflowerblue;
        height: auto;
     }
   </style>
</body>
</html>
…

                            