Підсвічування синтаксису з CodeMirror і WordPress

8 хв. читання

Оновлене: July 21, 2019

Про застосування 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 є спеціальна функція _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

Примітка: Рядки з опціями, крім останньої, повинні закінчуватися комами.

Стилi

Для застосування своїх стилів відображення потрібно створити файл 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>
…

                            