Подсветка синтаксиса кода WordPress

Всем доброго времени суток! Как и обещал, эту неделю посвящаю нужным плагинам для движка Wordpress. Сегодня речь пойдет о плагинах с помощью которых можно выделить, то есть, подсветить синтаксис кода HTML, PHP, CSS, JavaScript и другие языки программирования на страницах сообщения.

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

Подсветка синтаксиса WordPress

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

Подсветка синтаксиса WordPress - это формат стиля, обычно используемый для отображения кода. Он добавляет номера строк и цвета, чтобы выделить шаблоны кода, что упрощает понимание.

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

Однако он изначально не доступен в CMS, и его необходимо интегрировать с помощью плагинов. Как добавить подсветку синтаксиса в WordPress?

Для вставки и подсветки кода в WordPress существует много плагинов, но так как темы у всех разные, не каждый плагин подойдет. Методом проб и ошибок нужно умудриться подобрать модуль, конкретно под свой шаблон. Я остановил свой выбор на двух плагинах это - Плагин SyntaxHighlighter Evolved и замечательный плагин Crayon Syntax Highlighter. Первым пользуюсь в блоге "Школа Bloggera", а вторым здесь.

Лучшие плагины для выделения синтаксиса кода на сайте WordPress

Часто нам нужно поместить код в наш пост/сообщение или страницу. И, конечно же, мы хотим выделить эту часть кода, потому что она содержит для нас полезную информацию. Здесь, возникает ситуация, когда нам нужны плагины для выделения синтаксиса, чтобы легко визуализировать код.

Плагины Syntax Highlighter помогают настроить код, который вы хотите добавить в свои сообщения или страницы. Эти плагины могут выделять определенный код, чтобы он не выглядел беспорядочно с другим текстом.

Плагин  Syntax Highlighter - подсветка синтаксиса кода CSS, HTML, PHP на сайте

Установка, настройка и как пользоваться плагином Crayon

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

Установка обычная, через загрузчик плагинов. "Раздел Плагины" - "Добавить новый", в поле для поиска вводим название Crayon Syntax Highlighter и кликаем "Поиск". После успешной установки и активации плагина в разделе "Параметры" появится пункт Crayon. Нажимаем на него и откроется страница на русском языке для настроек модуля. Проблем с настройками у вас возникнуть не должно:

Тем для отображения блоков с подсветкой кода много, приведу пару примеров:

Настроек множество, с подсказками. Только не забудьте после тонкой настройки плагина сохранить изменения.

Далее, как пользоваться плагином Crayon Syntax Highlighter. У вас в визуальном редакторе сообщений появится специальная новая кнопка:

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

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

Плагин SyntaxHighlighter Evolved - подсветка синтаксиса кода CSS, HTML, PHP WordPress

Установка и настройка

SyntaxHighlighter Evolved позволяет легко размещать подсвеченный код на сайте. Установка плагина происходит таким же образом, как написано выше. Для настройки плагина перейдите в административную панель WordPress блога в раздел "Параметры" – "Syntax Highlighter". Мы попадем на страницу:

Здесь, все просто. Нужно выбрать цвет оформления подсветки блока с кодом:

Затем, отметьте нужные параметры и нажмите сохранить изменения.

Как сделать подсветку кода CSS , HTML , PHP в сообщениях блога

Если в тексте статьи Вы захотите разместить php код и подсветить его, необходимо его заключить в теги:

[php]ваш код здесь[/php]

Код js:

[code lang="js"]ваш код здесь[/code]

И так далее. Все теги указаны на странице настроек плагина, в самом низу. Да, чуть не забыл, код вставлять надо в визуальном редакторе, а заключать в теги - режим "Текст". Вот и все о чем я хотел поведать вам сегодня. До встречи.