Куда уходят коды. Как я боролся с исчезновением форматированного кода при редактировании статей

Опубликовано: 17.10.2009Опубликовано в разделе: Работаю
Куда уходят коды. Как я боролся с исчезновением форматированного кода при редактировании статей

При написании статьи о выборе плагина для размещения в блоге личного портфолио я невольно пришел к мысли, что не плохо было бы в своих статьях размещать примеры различного кода (PHP, CSS, HTML и т.д.). Для этих целей существует масса плагинов.

Среди которых: SyntaxHighlighter Plus, WP-Syntax, Ion Snytax Highlighter, Raw HTML, CodeColorer, а так же многие другие. Все они по своему хороши до тех пор, пока вы при редактировании статьи не переключитесь в визуальный режим редактирования. Визуальный редактор (по умолчанию на платформе TinyMCE) просто удалит часть кода который вы хотели опубликовать или просто заменит на спец символы. Делает он это не со зла, а в целях безопасности. В итоге, если у вас в статье есть форматированный код вам категорически нельзя переключатся в режим визуального редактора и все время редактирования контента довольствоваться аскетичным HTML видом. Из создавшейся ситациии есть два выхода.

  1. Сменить ваш WYSIWYG редактор на другой, не использующий в основе TinyMCE. Который будет не менее удобен и к тому же не будет автоматически исправлять HTML теги в спец символы (например, символ < исправится на &lsaquo;) и дальше пользоваться любимым плагином для подсветки и форматирования кода.
  2. Установить плагин WP-SynHighlight который, как «Магомед» — сам идет к визуальному редактору. А именно выводит кнопку на панели, позволяющую оформлять код в визуальном режиме обходя таким образом конфликт интересов.

Может показаться что названый плагин не функционален, но это не так. Среди основных функций можно выделить следующие:

  • Подсветка синтаксиса языков (в наборе более 50 языков)
  • Возможность выводить номера строк форматированного кода, с настройкой номера первой строки. Возможно вообще отключить нумерацию строк в выводе конкретного кода.
  • Возможность задать заголовок для поля в котором выводится код.
  • Область с кодом можно свернуть нажатием на заголовок.
  • При наведении на какую либо фунцкию в PHP коде дается ссылка на описание этой фунции на сайте php.net
  • Возможность плагина по форматированнию кода в комментариях блога (можно отключить по требованию).

Пример форматирования кода с использованием плагина WP-SynHighlight

Нажми на этот текст - окно свернется
  1. <?php
  2. /*
  3. Plugin Name: WP-SynHighlight
  4. Plugin URI: http://www.fractalizer.ru/freeware-projects/wordpress-plugins/wp-synhighlight/
  5. Description: Syntax highlighting using shortcodes  Your code goes here  Please see README.txt and screenshots for more information
  6. Version: 0.961
  7. Author: Vladislav "FractalizeR" Rastrusny
  8. Author URI: http://www.fractalizer.ru
  9. */
  10.  
  11. /*  Copyright 2008  Vladislav "FractalizeR" Rastrusny (email : FractalizeR@yandex.ru)
  12.  
  13.  This program is free software; you can redistribute it and/or modify
  14.  it under the terms of the GNU General Public License as published by
  15.  the Free Software Foundation; either version 2 of the License, or
  16.  (at your option) any later version.
  17.  
  18.  This program is distributed in the hope that it will be useful,
  19.  but WITHOUT ANY WARRANTY; without even the implied warranty of
  20.  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21.  GNU General Public License for more details.
  22.  
  23.  You should have received a copy of the GNU General Public License
  24.  along with this program; if not, write to the Free Software
  25.  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  26. */
  27.  
  28. //Registering highlighter
  29. require_once 'modules/highlighter.php';
  30. add_shortcode('codesyntax', 'fr_codesyntax_handler');
  31.  
  32. //Making post-installation routines
  33. require_once 'modules/on_install.php';
  34. register_activation_hook(__FILE__, 'wp_synhighlight_on_install');
  35.  
  36. //Adding styles
  37. require_once 'modules/styles.php';
  38. add_action('wp_head', 'wp_synhighlight_head');
  39.  
  40. //Internationalization
  41. require_once 'modules/i18n.php';
  42. wp_synhighlighter_i18n_setup();
  43.  
  44. //Setting comments processing style
  45. require_once 'modules/comments.php';
  46. wp_synhighlighter_comments_setup();
  47.  
  48. //Loading editor plugin
  49. require_once 'modules/richeditor.php';
  50. add_action('init', 'wp_synhighlighter_addbuttons');
  51. //Adding options page
  52. add_action('admin_menu', 'wp_synhighlight_settings');
  53. function wp_synhighlight_settings() {
  54.  add_options_page('WP-SynHighlight Settings', 'WP-SynHighlight', 'activate_plugins',
  55.  dirname(__FILE__) . '/modules/settings.php');
  56. }
  57. ?>

Единственное что возможно придется настраивать вручную – это размер форматированного кода. Может существенное не совпадать с текущим размером остального текста. Исправляется следующим образом:

Открываем файл wp-content/plugins/wp-synhighlight/wp-synhighlighter.css

И добавляем строку font-size:10px;

В примере ниже я задал размер шрифта во второй строке CSS файла.

Первые строки файла wp-synhighlighter.css
  1. div.wp-synhighlighter-inner {
  2. font-size:10pt;
  3. height: auto;
  4. max-height: 300px;
  5. overflow: auto;

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

Так же рекомендую почитать:

  1. Создание портфолио на Wordpress (обзор плагинов)