Вывод программного кода в wordpress

Добрый вечер. Каждый человек, который ведет блог на тему, связанную с программированием, должен показывать своим читателям примеры программного кода. Изначально wordpress не дружит с выводом кода: он не хочет его отрисовывать (ещё бы, ведь верстальщики не делали специальные классы для вывода кода), он всячески заменяет символы на их html эквиваленты (спасибо разработчикам wordpress за это, ведь они нас с помощью этого защищают от взлома). Сегодня я расскажу, как нормально выводить свой программный код в записях вашего блога.

Вывод программного кода в wordpress

Для вывода программного кода существует два различных решения:

  1. найти css для вывода кода и добавить их вручную к какому-либо тегу, а затем использовать этот тег там, где нужно вывести код; Плюсы — нет дополнительной нагрузки на блог, также вы точно знаете, какой стиль за что отвечает. Минусы — много ручной работы перед тем, как все заработает.
  2. Использовать плагин, который сам будет отрисовывать ваш программный код. Плюсы — минимум потраченного времени до того, как все начнет работать. Минусы — вы не знаете, как там, что работает (какой стиль за что отвечает), дополнительная нагрузка на сервер (ведь, несмотря на то, что там одни css стили, без серверной части там не обошлось).

Я выбрал второй способ, так как не хотел с этим возиться. Из огромного множества плагинов, которые позволяют выводить свой программный код в блог, я выбрал SyntaxHighlighter Plus. Он позволяет отрисовывать все языки программирования, которые в рунете хоть немного известны.

Настройка плагина, как обычно, происходит на странице

wp-admin/options-general.php?page=syntaxhighlighter-plus/syntaxhighlighter.php

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

Для вывода кода нужно использовать конструкцию:

[sоurcecode lаnguage="ЯЗЫК"]КОД[/sоurcеcode]

Внимание! Я поменял несколько английских букв на русские эквиваленты, поэтому не копируйте этот код, а перепишите его руками.

Если вы вставите эту конструкцию к себе в блог, то увидите, что плагин SyntaxHighlighter Plus добавляет к правой стороне блока посторонние три кнопки: копировать, about, ещё какая-то (не помню). Мне это не понравилось и я решил их убрать. Это делается в файле

 syntaxhighlighter-plus\syntaxhighlighter-plus\syntaxhighlighter\src\shCore.js

Там строку:

'toolbar' : true,

нужно поменять на:

'toolbar' : false,

Конечно же, я нашёл решение, как добавить кнопку «добавить программный код в запись» на панель визуального редактора, но об этом я уже расскажу в следующей статье.

Категории: wordpress

Метки: ,