Як вставити приклад коду в записах та на сторінках WordPress: 7 плагінів

Ви коли-небудь намагалися скопіювати та вставити фрагмент коду в WordPress? Це не працює! WordPress не може відрізнити фрагмент коду, який ви просто хочете продемонструвати, від фрагмента, який має виконати якусь дію.

Якщо ви часто ділитеся фрагментами коду з читачами у своїх уроках, вам потрібен інший шлях. У цій статті ми розповімо про найкращі інструменти і плагіни, які допоможуть вам додати стильні абзаци з кодом на WordPress, що легко читаються.

Дивіться також:

• Як додати підсвічування синтаксису в коді, використовуючи Prism.js
• Покращуємо вигляд редактора коду WordPress за допомогою CodeMirror
• Куди вставляти цей код у WordPress? Загальна структура файлів теми
• 15 корисних WordPress плагінів для вставки шорткодів
• Як додати кнопку на адмін панель для швидкого виправлення коду WordPress теми

Вбудований у WordPress спосіб поділитися кодом

Давайте почнемо з початку:

WordPress має кілька інтегрованих способів для відображення фрагментів коду. Вони не завжди гарні, але функціональні. Двома базовими методами є тегикод> іпопередньо>.

Обидва відобразять ваші фрагменти коду, відмінності полягають у оформленні, яке залежить від вашої теми.

Наприклад, ось так виглядають ці теги у стандартній темі WordPress Twenty Sixteen:

Але ці теги мають проблеми:

1. Ви повинні записати ваш приклад коду як рядок до його відображення. Для цього потрібно вставити код в енкодер, наприклад, Код прикрасити, а потім вставити результат між тэгамикод> іпопередньо>.
2. Немає нумерації рядків, щоб спростити читання коду.
3. Немає підсвічування синтаксису. Підсвічування синтаксису забарвлює різні елементи коду в різні кольори, що робить код читальнішим.

Давайте тепер приступимо до методів додавання фрагментів коду WordPress, які спростять вам процес вставки сніпетів, а користувачам їх читання.

1.SyntaxHighlighter Evoluved

SyntaxHighlighter Evolved – це популярний плагін для вставки нумерованих сніпетів з підсвіченим синтаксисом у WordPress. Все, що потрібно зробити – це загорнути ваш код у відповідний шорткод і потім відобразити приблизно так:

Ви також можете використовувати різні стилі для відображення коду, наприклад, перенесення рядків, але користувачам буде складно копіювати і вставить код:

Основні функції:

• Додавання нумерації рядків фрагмента коду
• Додавання підсвічування синтаксису
• Різні колірні параметри
• Може додати класи CSS для більш красивого зовнішнього вигляду.

2.Підсвічування синтаксису олівцем

Crayon Syntax Highlighter – це ще один популярний плагін, який додає нумерацію рядків та підсвічування синтаксису до вашого фрагмента коду. У порівнянні з Syntax Highlighter Evolved, у Crayon Syntax Highlighter є більше налаштувань. Ви можете налаштувати практично все у вкладці налаштування.

Ви також можете автоматично дублювати стиль Sublime Text (популярного текстового редактора):

Основні функції:

• Додавання нумерації рядків фрагмента коду
• Додавання підсвічування синтаксису
• Підтримка 65 різних мов
• Багато стилів, деякі з яких імітують популярні редактори коду
• Простота в налаштуванні будь-якого аспекту вашого відображення сніпету

3.oEmbed Gist

oEmbed – це простий плагін, який дозволяє вам вставити gist (сніппет та коротке роз'яснення до нього). Для використання цього плагіна вам просто потрібно вставити код у gist Editor і створити публічний gist:

А потім просто вставити gist URL у WordPress Editor, і плагін автоматично вставить сніппет коду:

Основні функції:

• Перевершує GitHub Gist
• Вставляє gist, вставивши URL
• Може вставити один файл із багатофайлового gist

4.WP-GeSHi-Highlight

WP-GeSHi-Highlight – це ще один плагін, який додає нумерацію рядків та підсвічування синтаксису коду, який ви вставили у редактор WordPress. З ним ви можете

використовувати звичайні тегипопередньо>, поки ви визначаєте мову програмування.

WP-GeSHi-Highlight – це легкий плагін, з точки зору функціональності та коду, що виводиться:

Основні функції:

• Підсвічування синтаксису за допомогою GeSHi
• Додавання додаткової нумерації рядків
• Вставте код із стандартними тегамипопередньо> та певною мовою
• Легкість – додає лише один HTTP запит

5.Pastebin

Pastebin – це ще один веб-сайт для того, щоб ділитися сніпетами коду. Його робота схожа на роботу інструменту GitHub Gist, який ми показали вам раніше. І, як GitHub Gist, цей плагін робить вставку Pastebin коду на ваш сайт WordPress дуже легкою.

Все, що вам потрібно зробити, це додати код на Pastebin, а потім просто вставити Pastebin URL в редактор WordPress. Ваш сніпет вставиться автоматично:

Показувати нумерацію рядків чи ні залежить від ваших налаштувань Pastebin.

Основні функції:

• Вставка коду прямо з Pastebin
• Доступні нумерація рядків та підсвічування синтаксису
• Просто вставте URL у WordPress Editor
• Можете також вставити шорткод та Pastebin ID

6.Pastacode

Pastacode допоможе вам вставити сніпет коду, використовуючи популярну бібліотеку PrismJs. Ви можете підсвітити особливі рядки коду та змінити стиль за допомогою однієї з доступних тем. Pastacode також підтримує вставку коду GitHub, Gist, Pastebin, BitBucket або BitBucket.

Основні функції:

• Додавання нумерованих рядків до фрагмента коду
• Додавання підсвічування синтаксису фрагментів коду
• Використання бібліотеки PrismJs
• Можливість вставляти код із GitHub, Gist, Pastebin, і т.д.
• Можливість підсвічувати спеціальні рядки коду

7.Код Prettify

Code Prettify використовує бібліотеку Google Code Prettify для автоматичного додавання підсвічування до вашихпопередньо> ікод>. З цим плагіном ваш сніпет коду буде виглядати, як внизу, а не так, як ми показували спочатку цієї статті:

Основні функції:

• Працює із стандартними тегамипопередньо> ікод>
• Використовує бібліотеку Google Code Prettify
• Правильно зменшує та ставить у чергу

Підсумки

Ці плагіни допоможуть вам вставити фрагмент коду прямо в запис або додати код із стороннього інструмента, як GitHub або Pastebin. Якби нам довелося вибирати фаворита, то це був би Crayon Syntax Highlighter за різноманітність тем та стилів, які можна використовувати.

А у вас є улюблений метод відображення сніпетів коду у записах WordPress? Розкажіть нам у коментарях!

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/