Добавляем на WordPress сайт подсветку синтаксиса Prism.js

Добавляем на WordPress сайт подсветку синтаксиса Prism.js

Пробовали ли вы, когда-нибудь добавить подсветку синтаксиса на ваш сайт WordPress и статьи в блоге, созданные либо в редакторе Gutenberg, либо в классическом редакторе?

По умолчанию стиль оформления фрагментов кода в редакторе WordPress слишком скучен, а вам необходимо чтобы фрагменты кода в статье выглядели так, как будто пользователь находится в реальном редакторе кода (IDE)?

Что ж, тогда можно воспользоваться библиотекой Prism.js (или любой другой на ваше усмотрение, например Highlight.js) и добавить ее в наш WordPress сайт.

Prism — это подсветка синтаксиса, которая подчёркивает все фрагменты кода, которые вы размещаете в статьях или на страницах сайта.

Если вы вдруг не знаете, что такое подсветка синтаксиса, то вот наглядный пример.

По умолчанию Ваши фрагменты кода будут выглядеть примерно так:

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );

// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}

А с подсветкой кода так:

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );

// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}

Чувствуется разница, правда?!

В этой статье мы рассмотрим, как реализовать подсветку синтаксиса с помощью Prism.js на WordPress сайте без плагинов.

Конечно, можно не париться и установить плагин для подсветки синтаксиса (например Crayon Syntax Highlighter или какой-нибудь похожий), но я стараюсь по возможности избегать добавления лишних плагинов, чтобы сайт загружался быстрее.

К тому же, Prism очень легкий, поэтому он не будет сильно замедлять работу Вашего сайта (в сжатом состоянии он весит около 2KB).

Prism — это легкий, расширяемый инструмент для подсветки синтаксиса, созданный с учетом современных веб-стандартов.

Также, в его пользу говорит тот факт, что многие известные сайты используют его, включая CSS Tricks, Stripe, Mozilla, и даже сайт React.

Ниже приведены 5 шагов, следуя которым вы узнаете, как добавить подсветку синтаксиса Prism.js на Ваш WordPress сайт:

Выбираем нужные опции библиотеки

Для начала зайдите на страницу загрузки Prism:

Страница загрузки Prism

Здесь вы увидите целую кучу опций, которые позволяют настроить внешний вид фрагментов вашего кода с помощью Prism.

Выберите минифицированную версию «Minified version» в разделе «Compression level«, что позволит сократить количество используемого кода, и соответственно даст возможность ему быстрее работать на вашем сайте.

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

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

Я оставил отмеченные по умолчанию MarkupCSSC-like и JavaScript. А также добавил PHP, поскольку что примеры кода для WordPress написаны на PHP. В том случае, если вы точно знаете, что будете использовать к примеру, Python, TypeScript или SQL, то просто поставьте галочку напротив любого из этих языков. Имейте в виду, что чем больше языков Вы отметите, тем больше будет размер ваших JavaScript и CSS файлов.

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

При желании можно добавить плагины, которые предоставляют вам немного дополнительной функциональности, как например отображение номеров строк в фрагментах кода или добавление кнопки «Копировать», чтобы другие могли легко воспользоваться ими.

Выбор плагинов на странице загрузки Prism.js

Теперь, когда все необходимые опции Prism JS выбраны, пришло время перейти к Шагу 2!

Скачиваем файлы Prism JS и CSS

Второй шаг будет посвящен загрузке файлов скриптов и стилей Prism, и он будет самым простым. После того, как вы выбрали нужный вам уровень сжатия, языки и плагины, останется только загрузить файлы, которые затем будут добавлены на ваш сайт.

Нажмите на большие и заметные кнопки «Скачать JS» и «Скачать CSS«, как показано в конце Шага 1, и сохраните каждый из этих файлов где-нибудь на своем ПК. У вас получится два файла: prism.js и prism.css. Осталось их добавить в тему WordPress.

Загрузка файлов Prism в дочернюю тему

После скачивания файлов prism.js и prism.css, мы готовы к загрузке этих файлов на сайт.

На этом этапе на вам понадобится авторизироваться в админ-панели вашего хостинга (будь то SiteGround или любой другой хостинг). Многие хостинг-провайдеры используют cPanel, но если в вашем случае используется какая-нибудь другая панель, то просто перейдите в раздел, где вы можете получить доступ к файлам вашего сайта.

После того, как Вы вошли в админку своего хостинга (в данном случае cPanel), нажмите «Файловый менеджер«. Файловый менеджер SiteGround показан здесь:

Файловый менеджер SiteGround

Выберем путь к папке с активной темой. Если вы используете дочернюю тему, то надо указать путь к папке именно этой темы (папку вашей темы находится по ссылке wp-content/themes/your-theme-name).

Так как я использую тему Kadence вместе с дочерней темой, то в моем случае папка моей дочерней темы находится по адресу wp-content/themes/kadence-child (обзор темы Kadence можно прочитать в этой статье).

Находясь в папке темы, вы должны увидеть, что там уже находятся некоторые файлы, например style.css и functions.php. В эту папку мы и загрузим файлы prism.css и prism.js (для удобства можно создать дополнительную папку assets, в которой будут располагаться все наши референсы, включая скрипты, стили, картинки и пр.).

Теперь пришло время загрузить файлы.

Загрузка файлов prism.css и prism.js в папку темы WordPress

Нажмите кнопку «Загрузить«, как показано на скриншоте выше. Должна открыться страница загрузки. Перейдите к файлу prism.css, который вы сохранили на вашем компьютере и выберите этот файл.

Если необходимо задать файлу права доступа, то оставьте по умолчанию 6-4-4, как показано на рисунке ниже:

Права доступа файлу prism.css на хостинге

Теперь проделайте те же самые шаги для файла prism.js.

После этого, зайдя в папку своей темы, вы должны увидеть файлы prism.css и prism.js, как показано ниже:

Файлы prism.css и prism.js в папке темы

Настала пора переходить к Шагу 4.

Добавляем PHP-функцию для подключения Prism

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

Вернемся в уже знакомую нам папку wp-content/themes/your-theme-name. Очень важно, чтобы при редактировании темы WordPress всегда использовалась дочерняя тема, и поэтому мы будем работать с файлом functions.php дочерней темы.

НИКОГДА не изменяйте файл functions.php родительской темы, потому что это может привести у поломке всего сайта. К тому же после обновления вашей темы, будут утеряны все изменения, которые вы делали в файле functions.php родительской темы.

Хорошо, теперь, когда мы выяснили все возможные нюансы, найдите файл functions.php в папке вашей родительской темы. В моем случае он находится в wp-content/themes/kadence-child.

Щелкните правой кнопкой мыши по этому файлу и выберите «Редактировать«. После этого может появиться окно с предложением создать резервную копию файла на случай, если что-то пойдет не так. Не ленитесь делать резервные копии, если боитесь что-то испортить.

В браузере должна появиться довольно корявая страница текстового редактора. Если вы уже открывали этот файл, то возможно там имеется какой-то код (ну или, в крайнем случае, комментарии разработчика темы). В противном случае он будет пустым, и выглядит примерно так:

<?php
/**
 * Add custom functions here
 */

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

Если не сильно вдаваться в подробности, то правильный способ подключить пользовательские скрипты и стили на вашем сайте WordPress, это сначала зарегистрировать нужный файл, а затем подключить его. Больше по подключению CSS и JavaScript на вашем сайте WordPress можно прочитать в официальной документации.

Примечание: Я собираюсь показать два способа подключения файлов Prism на вашем сайте. Первый способ — это загрузка файлов JS и CSS на каждой странице вашего сайта. Это не должно сильно замедлять сайт, поскольку сами файлы очень маленькие. Однако, лучше (и правильней) использовать второй способ, в котором файлы будут загружаться только на определенных страницах, что несомненно более производительно.

Напишем простенькую PHP-функцию прямо в нашем файле functions.php. Первый вариант загружает файлы Prism на каждой странице вашего сайта. Второй вариант загружает файлы Prism только на определенных страницах, и, соответственно, не запускает, когда в них нет необходимости. Рассмотрим оба варианта.

Вариант 1: Загрузка файлов Prism на каждой странице вашего сайта.

<?php

// Function to add prism.css and prism.js to the site
function add_prism() {
    
    // Register prism.css file
    wp_register_style(
        'prismCSS', // handle name for the style 
        get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
    );

    // Register prism.js file
    wp_register_script(
        'prismJS', // handle name for the script 
        get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
    );

    // Enqueue the registered style and script files
    wp_enqueue_style('prismCSS');
    wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

Вариант 2: Загрузка файлов Prism только на тех страницах блога, которые помечены тегом «code».

<?php
/**
 * Add custom functions here
 */

// Function to add prism.css and prism.js to the site
function add_prism() {

    if ( is_single() && has_tag( 'code' ) ) {
        
        // Register prism.css file
        wp_register_style(
            'prismCSS', // handle name for the style 
            get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
        );

        // Register prism.js file
        wp_register_script(
            'prismJS', // handle name for the script 
            get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
        );

        // Enqueue the registered style and script files
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');

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

На своем сайте я использовал Вариант 2, поскольку хочу загружать файлы Prism только тогда, когда это действительно необходимо. Это совсем не означает что все пропало, если они грузятся на каждой странице, так как они сами по себе небольшие. Но зачем загружать их на каждой странице, если не это нужно?

В Варианте 2 обратите внимание на дополнительную строку, которая отсутствует в Варианте 1.

if ( is_single() && has_tag( 'code' ) ) { 
    // function here 
}

Использование условного тега is_single() означает, что я хочу, чтобы файлы Prism загружались только на страницах записей блога, а это значит, что на главной странице сайта и на обычных страницах, типа О нас и Контакты, файлы не загружаются!

Вторая часть && has_tag( 'code' ) означает, что я хочу, чтобы файлы загружались только в том случае, если это пост в блоге и он помечен тэгом «code«. Таким образом, я могу очень точечно помечать посты блога, в которых есть фрагменты кода. И на всех остальных постах, в которых отсутствуют фрагменты кода, файлы загружаться не будут.

Таким образом, если я добавляю статью и хочу, чтобы мои фрагменты кода выглядели красиво, все что нужно сделать, это добавить тэг «code«, и все!

Добавление тэга "code" в статью

Используем Prism в Gutenberg и классическом редакторе WordPress.

Последний шаг покажет как использовать Prism JS в редакторе Gutenberg, а также в классическом редакторе, если Вы все еще используете его.

Редактор Gutenberg:

Если Вы используете новый редактор WordPress Gutenberg, то следуйте указанному ниже методу. Кстати говоря, советую все таки перейти на Gutenberg, потому что классический редактор будет поддерживаться только до конца 2021 года.

Блок Код в редакторе Gutenberg

Выберите блок Код, а затем введите или вставьте фрагмент кода, который нужно добавить в статью. Изначально он будет выглядеть примерно так:

<a href="https://startblogging101.com" target="_blank">Start Blogging 101</a>

Как только код будет добавлен в данный блок, все, что вам нужно сделать, это добавить этому блоку соответствующий класс CSS, чтобы включить подсветку синтаксиса.

Когда блок с кодом в фокусе (для этого необходимо кликнуть по нему левой кнопкой мыши), нажмите кнопку Settings (Настройки) в правом верхнем углу и найдите вкладку Advanced (Дополнительно) в самом нижнем углу правой панели.

Разверните вкладку Advanced и вы увидите поле, позволяющее добавить дополнительные классы CSS. Здесь необходимо указать язык, на котором написан Ваш код.

Например, если это HTML-код, то введите language-markup, если это JavaScript, то введите language-javascript, если это PHP, то введите language-php, и так далее.

Поле для добавления дополнительных классов CSS в редакторе Gutenberg

Если Вы не уверены, как правильно маркировать фрагмент кода, то ознакомьтесь с разделом «Поддерживаемые языки» на сайте PrismJS.

И хотя фрагменты кода в редакторе Gutenberg будет выглядеть по прежнему довольно уныло, но на фронтенде мы увидим, что все очень даже не плохо! Теперь Ваш блок кода теперь будет выглядеть так:

<a href="https://startblogging101.com" target="_blank">Start Blogging 101</a>

Вот и все! Вы вполне успешно добавили подсветку синтаксиса Prism JS на страницы вашего блога WordPress с помощью редактора Gutenberg.

Классический редактор WordPress:

Если Вы все еще используете классический редактор WordPress, используйте следующий метод для добавления Prism JS в ваши статьи.

Во время добавления статей, перейдите в редакторе на вкладку «Текст«, которая позволяет автору добавлять собственный HTML.

Добавляя фрагменты кода в HTML, необходимо обернуть его в теги <pre><code class="language-*>, где вместо звездочки следует добавить нужный язык. Если добавляемый фрагмент кода будет написан на JavaScript, то это будет <pre><code class="language-javascript"> и так далее.

Вот так! Теперь у вас есть возможность использовать подсветку синтаксиса Prism для любых блоков с кодом, написанных либо в редакторе Gutenberg, либо в классическом редакторе WordPress. Это идеальный вариант для разработчиков или тех, кто включает фрагменты кода в свои статьи.

Что вы думаете о Prism JS? Удалось ли вам заставить его работать или у вас возникли проблемы, дайте мне знать в комментариях!

Источник: wpstyle.info

Оставить комментарий