Вывод программного кода в wordpress
Добрый вечер. Каждый человек, который ведет блог на тему, связанную с программированием, должен показывать своим читателям примеры программного кода. Изначально wordpress не дружит с выводом кода: он не хочет его отрисовывать (ещё бы, ведь верстальщики не делали специальные классы для вывода кода), он всячески заменяет символы на их html эквиваленты (спасибо разработчикам wordpress за это, ведь они нас с помощью этого защищают от взлома). Сегодня я расскажу, как нормально выводить свой программный код в записях вашего блога.
Для вывода программного кода существует два различных решения:
- найти css для вывода кода и добавить их вручную к какому-либо тегу, а затем использовать этот тег там, где нужно вывести код; Плюсы — нет дополнительной нагрузки на блог, также вы точно знаете, какой стиль за что отвечает. Минусы — много ручной работы перед тем, как все заработает.
- Использовать плагин, который сам будет отрисовывать ваш программный код. Плюсы — минимум потраченного времени до того, как все начнет работать. Минусы — вы не знаете, как там, что работает (какой стиль за что отвечает), дополнительная нагрузка на сервер (ведь, несмотря на то, что там одни css стили, без серверной части там не обошлось).
Я выбрал второй способ, так как не хотел с этим возиться. Из огромного множества плагинов, которые позволяют выводить свой программный код в блог, я выбрал SyntaxHighlighter Plus. Он позволяет отрисовывать все языки программирования, которые в рунете хоть немного известны.
Настройка плагина, как обычно, происходит на странице [sourcecode language=»php»]wp-admin/options-general.php?page=syntaxhighlighter-plus/syntaxhighlighter.php[/sourcecode] Там вы сможете выбрать только стили, которыми и будет отображаться ваш программный код.
Для вывода кода нужно использовать конструкцию:
[sourcecode language=»php»][sоurcecode lаnguage=»ЯЗЫК»]КОД[/sоurcеcode][/sourcecode]
Внимание! Я поменял несколько английских букв на русские эквиваленты, поэтому не копируйте этот код, а перепишите его руками.
Если вы вставите эту конструкцию к себе в блог, то увидите, что плагин SyntaxHighlighter Plus добавляет к правой стороне блока посторонние три кнопки: копировать, about, ещё какая-то (не помню). Мне это не понравилось и я решил их убрать. Это делается в файле[sourcecode language=»php»] syntaxhighlighter-plus\syntaxhighlighter-plus\syntaxhighlighter\src\shCore.js[/sourcecode] Там строку:
[sourcecode language=»php»]’toolbar’ : true,[/sourcecode]
нужно поменять на:
[sourcecode language=»php»]’toolbar’ : false,[/sourcecode]
Конечно же, я нашёл решение, как добавить кнопку «добавить программный код в запись» на панель визуального редактора, но об этом я уже расскажу в следующей статье.
Категории: wordpress
Метки: плагины, программирование