Как сделать подсветку синтаксиса

В этой заметке покажу, как сделать подсветку синтаксиса на сайте без использования плагина. Для подсветки кода в WordPress можно просто создать шорткод, который будет оборачивать код в нужный HTML-формат с поддержкой подсветки синтаксиса.

Для этого придётся использовать такие инструменты, как Prism.js или Highlight.js, или просто создать свой собственный шорткод. Здесь я покажу, как создать свой собственный шорткод для подсветки кода.

Шаги по созданию шорткода

Здесь надо сделать всего 2 шага:

1. Открыть на редактирование файл functions.php рабочей темы. Можно получить доступ к этому файлу в разделе «Внешний вид» → «Редактор» в админке WordPress.
2. Вставить следующий код в конец файла functions.php:
   // Функция для шорткода function code_highlight_shortcode($atts, $content = null) { $atts = shortcode_atts( array( 'lang' => 'html', // Язык по умолчанию ), $atts, 'highlight' ); // Удаление лишних символов $content = trim($content); // Экранирование содержимого $content = esc_html($content); // Генерация HTML для подсветки return '<pre><code class="language-' . esc_attr($atts['lang']) . '">' . $content . '</code></pre>'; } add_shortcode('highlight', 'code_highlight_shortcode'); // Отключение автодобавления <p> и <br> для шорткода add_filter('the_content', function($content) { // Ищем все шорткоды highlight и удаляем автодобавленные теги if (has_shortcode($content, 'highlight')) { // Убираем <br /> и <p> внутри шорткода $content = preg_replace_callback('/\[highlight(.*?)\](.*?)\[\/highlight\]/s', function($matches) { $atts = shortcode_parse_atts($matches[1]); $code_content = $matches[2]; // Удаляем автоматические <br /> и <p> $code_content = str_replace(['<br />', '<br>', '<p>', '</p>'], '', $code_content); // Вызываем функцию шорткода для обработки содержимого return code_highlight_shortcode($atts, $code_content); }, $content); } return $content; }, 11);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   // Функция для шорткода function code_highlight_shortcode($atts, $content = null) {     $atts = shortcode_atts(         array(             'lang' => 'html', // Язык по умолчанию         ),         $atts,         'highlight'     );       // Удаление лишних символов     $content = trim($content);       // Экранирование содержимого     $content = esc_html($content);       // Генерация HTML для подсветки     return '<pre><code class="language-' . esc_attr($atts['lang']) . '">' . $content . '</code></pre>'; } add_shortcode('highlight', 'code_highlight_shortcode');   // Отключение автодобавления <p> и <br> для шорткода add_filter('the_content', function($content) {     // Ищем все шорткоды highlight и удаляем автодобавленные теги     if (has_shortcode($content, 'highlight')) {         // Убираем <br /> и <p> внутри шорткода         $content = preg_replace_callback('/\[highlight(.*?)\](.*?)\[\/highlight\]/s', function($matches) {             $atts = shortcode_parse_atts($matches[1]);             $code_content = $matches[2];               // Удаляем автоматические <br /> и <p>             $code_content = str_replace(['<br />', '<br>', '<p>', '</p>'], '', $code_content);               // Вызываем функцию шорткода для обработки содержимого             return code_highlight_shortcode($atts, $code_content);         }, $content);     }     return $content; }, 11);

Использование шорткода в записях

Теперь можно использовать шорткод в своих записях следующим образом:

• Для HTML:
  
  [highlight lang="html"] <div>Hello, World!</div> [/highlight]

  1 2 3

  [highlight lang="html"] <div>Hello, World!</div> [/highlight]

• Для CSS:
  
  [highlight lang="css"] body { background-color: #f0f0f0; } [/highlight]

  1 2 3 4 5

  [highlight lang="css"] body {     background-color: #f0f0f0; } [/highlight]

• Для JavaScript:
  
  [highlight lang="javascript"] function greet() { console.log("Hello, World!"); } [/highlight]

  1 2 3 4 5

  [highlight lang="javascript"] function greet() {     console.log("Hello, World!"); } [/highlight]

• Для PHP:
  
  [highlight lang="php"] <?php function greet() { echo "Hello, World!"; } ?> [/highlight]

  1 2 3 4 5 6 7

  [highlight lang="php"] <?php function greet() {     echo "Hello, World!"; } ?> [/highlight]

Подключение библиотеки подсветки кода

Далее, добавим стиль и функциональность подсветки, подключив библиотеку, такую как Prism.js или Highlight.js. Например, чтобы использовать Prism.js, надо выполните следующие действия:

1. Добавить файлы prism.css и prism.js в рабочую тему: Скачать их с официального сайта Prism.js и добавьте в соответствующую папку в каталоге рабочей темы (например, в папку js и css).
2. Подключить файлы в functions.php:
   function enqueue_prism_scripts() { wp_enqueue_style('prism-css', get_template_directory_uri() . '/css/prism.css'); wp_enqueue_script('prism-js', get_template_directory_uri() . '/js/prism.js', array(), null, true); } add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

   1 2 3 4 5

   function enqueue_prism_scripts() {     wp_enqueue_style('prism-css', get_template_directory_uri() . '/css/prism.css');     wp_enqueue_script('prism-js', get_template_directory_uri() . '/js/prism.js', array(), null, true); } add_action('wp_enqueue_scripts', 'enqueue_prism_scripts');

Как добавить нумерацию строк

Если требуется добавить нумерацию строк в подсветку кода, надо перед скачиванием файлов prism.css и prism.js, помимо языков программирования, коды которых хотим подсвечивать, отметить чекбокс для «Line Numbers» в разделе «Plugins».

Заключение

Теперь можно использовать шорткод [highlight] для подсветки кода в записях. Проверяем, корректно ли работают подключенные библиотеки, и при необходимости адаптируем стили по своему усмотрению.

Всем WEB!