При написании статьи о выборе плагина для размещения в блоге личного портфолио я невольно пришел к мысли, что не плохо было бы в своих статьях размещать примеры различного кода (PHP, CSS, HTML и т.д.). Для этих целей существует масса плагинов.
UPD. По причине смены движка WordPress, через несколько лет после написания данной статьи, пришлось сменить и плагин для подсветки кода в статьях. После 5 минутного поиска, на основе рейтинга отзывов был выбран Crayon Syntax Highlighter.
Среди которых: SyntaxHighlighter Plus, WP-Syntax, Ion Snytax Highlighter, Raw HTML, CodeColorer, а так же многие другие. Все они по своему хороши до тех пор, пока вы при редактировании статьи не переключитесь в визуальный режим редактирования. Визуальный редактор (по умолчанию на платформе TinyMCE) просто удалит часть кода который вы хотели опубликовать или просто заменит на спец символы. Делает он это не со зла, а в целях безопасности. В итоге, если у вас в статье есть форматированный код вам категорически нельзя переключатся в режим визуального редактора и все время редактирования контента довольствоваться аскетичным HTML видом. Из создавшейся ситациии есть два выхода.
- Сменить ваш WYSIWYG редактор на другой, не использующий в основе TinyMCE. Который будет не менее удобен и к тому же не будет автоматически исправлять HTML теги в спец символы (например, символ < исправится на ‹) и дальше пользоваться любимым плагином для подсветки и форматирования кода.
- Установить плагин WP-SynHighlight который, как «Магомед» – сам идет к визуальному редактору. А именно выводит кнопку на панели, позволяющую оформлять код в визуальном режиме обходя таким образом конфликт интересов.
Может показаться что названый плагин не функционален, но это не так. Среди основных функций можно выделить следующие:
- Подсветка синтаксиса языков (в наборе более 50 языков)
- Возможность выводить номера строк форматированного кода, с настройкой номера первой строки. Возможно вообще отключить нумерацию строк в выводе конкретного кода.
- Возможность задать заголовок для поля в котором выводится код.
- Область с кодом можно свернуть нажатием на заголовок.
- При наведении на какую либо фунцкию в PHP коде дается ссылка на описание этой фунции на сайте php.net
- Возможность плагина по форматированнию кода в комментариях блога (можно отключить по требованию).
Пример форматирования кода с использованием плагина WP-SynHighlight
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?php /* Plugin Name: WP-SynHighlight Plugin URI: http://www.fractalizer.ru/freeware-projects/wordpress-plugins/wp-synhighlight/ Description: Syntax highlighting using shortcodes Your code goes here Please see README.txt and screenshots for more information Version: 0.961 Author: Vladislav "FractalizeR" Rastrusny Author URI: http://www.fractalizer.ru */ /* Copyright 2008 Vladislav "FractalizeR" Rastrusny (email : FractalizeR@yandex.ru) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ //Registering highlighter require_once 'modules/highlighter.php'; add_shortcode('codesyntax', 'fr_codesyntax_handler'); //Making post-installation routines require_once 'modules/on_install.php'; register_activation_hook(__FILE__, 'wp_synhighlight_on_install'); //Adding styles require_once 'modules/styles.php'; add_action('wp_head', 'wp_synhighlight_head'); //Internationalization require_once 'modules/i18n.php'; wp_synhighlighter_i18n_setup(); //Setting comments processing style require_once 'modules/comments.php'; wp_synhighlighter_comments_setup(); //Loading editor plugin require_once 'modules/richeditor.php'; add_action('init', 'wp_synhighlighter_addbuttons'); //Adding options page add_action('admin_menu', 'wp_synhighlight_settings'); function wp_synhighlight_settings() { add_options_page('WP-SynHighlight Settings', 'WP-SynHighlight', 'activate_plugins', dirname(__FILE__) . '/modules/settings.php'); } ?> |
Единственное что возможно придется настраивать вручную – это размер форматированного кода. Может существенное не совпадать с текущим размером остального текста. Исправляется следующим образом:
Открываем файл wp-content/plugins/wp-synhighlight/wp-synhighlighter.css
И добавляем строку font-size:10px;
В примере ниже я задал размер шрифта во второй строке CSS файла.
|
1 2 3 4 5 |
div.wp-synhighlighter-inner { font-size:10pt; height: auto; max-height: 300px; overflow: auto; |
Если есть желание изменяйте остальные параметры как вам угодно, для улучшения внешнего вида форматированного текста. Если вам не нравится подсветка синтаксиса вообще, то при выборе языка поставьте «Text».