Редактор Gutenberg уже имеет встроенный блок «Код», но он просто выводит текст моноширинным шрифтом без подсветки синтаксиса (цветного выделения тегов, переменных и функций).
Чтобы код выглядел красиво и читаемо (как в редакторах кода), рекомендую использовать один из следующих плагинов:
1. Code Block Pro (Лучший для современного вида)
На данный момент это один из самых популярных и эстетичных плагинов, созданных специально для Gutenberg.
- Особенности: Использует движок Shiki (тот же, что и в VS Code), поэтому код выглядит очень стильно.
- Плюсы: Огромное количество тем (Dracula, GitHub, Night Owl), кнопка «Копировать», поддержка почти всех языков программирования. Не нагружает сайт лишним JavaScript на фронтенде.
- Как найти: В поиске плагинов введите Code Block Pro.
2. SyntaxHighlighter Evolved
Это классика от создателей WordPress (Automattic).
- Особенности: Проверенный временем плагин.
- Плюсы: Очень надежный, добавляет номера строк, позволяет легко выделить конкретные строки. Выглядит более «строго» и классически.
- Как найти: В поиске плагинов введите SyntaxHighlighter Evolved.
3. Enlighter – Customizable Syntax Highlighter
Мощный и очень гибкий плагин.
- Особенности: Позволяет делать вкладки с кодом (Codegroups), что удобно, если нужно показать один и тот же пример на разных языках (например, CSS и SCSS) в одном блоке.
- Плюсы: Встроенный редактор тем (можно настроить цвета под дизайн сайта), поддержка инлайн-кода.
- Как найти: В поиске плагинов введите Enlighter.
4. Prismatic
Если вам нужен легкий плагин без лишних наворотов.
- Особенности: Позволяет выбрать движок подсветки: Prism.js (красивый и легкий), Highlight.js (популярный) или просто экранирование.
- Плюсы: Минимум настроек, высокая скорость работы.
Как это работает после установки:
- Устанавливаете и активируете плагин.
- Открываете запись в редакторе Gutenberg.
- Нажимаете «+» (добавить блок).
- Ищете блок, соответствующий плагину (обычно он так и называется, например, “Code Pro” или “Enlighter Sourcecode”).
- Вставляете свой код и в настройках блока (справа) выбираете язык программирования (HTML, PHP, JS, Python и т.д.) для правильной раскраски.
Моя рекомендация: Попробуйте Code Block Pro, если вам важен современный дизайн (как в VS Code), или SyntaxHighlighter Evolved, если нужна максимальная простота и надежность.
Ваш сайт на WordPress тормозит, выдает ошибки или был взломан? Я — именно тот специалист, который приведет его в порядок. В веб-разработке я уже более 20 лет, и за это время научился решать самые нестандартные задачи. Мой профиль — это комплексная забота о вашем проекте. Я провожу глубокую очистку кода от вредоносных скриптов, ставлю "бронебойную" защиту и оптимизирую скорость загрузки. Ну и, конечно, создаю новые сайты и дорабатываю существующие, чтобы они приносили вам прибыль, а не головную боль.
Комментариев нет