Подсветка тегов в редакторе WordPress

Владимир | | WordPress.

wp advanced code editor

Вчера наткнулся на очень интересный плагин для WordPress. Называется WP Advanced Code Editor.

Если говорить кратко, то этот плагин расширяет возможности стандартного HTML редактора. Визуальный режим (WYSIWYG) при использовании WP Advanced Code Editor должен быть отключен.

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

Нормально вставить их в визуальном редакторе практически невозможно, т.к. он пытается внести в них изменения. Кроме того, чтобы правильно работала подсветка кода мне необходимо указать язык программирования в теге pre:

<pre lang="php">...</pre>

Этого тоже нельзя сделать в WYSIWYG режиме.

Конечно, если вы пользуетесь визуальным редактором, то можете дальше не читать. Вряд ли этот плагин вам пригодится.

Теперь подробнее о возможностях.

1) Подсветка HTML тегов. Это основная функция плагина ради которой и стоит его установить. Читать пост становится значительно легче.

Сравните:

simple text

рис.1

highlighted text

рис.2

Думаю, не нужно объяснять, почему текст на втором рисунке легче читается. К тому же в таком режиме значительно проще найти не закрытые теги.

2) Полноэкранный режим. Точнее редактор разворачивается на все окно браузера, а не на весь экран. Очень удобно при редактировании больших текстов.

3) Поиск и замена. Можно использовать регулярные выражения. Опять же, если вам приходится работать с длинными текстами, то, безусловно, эту функцию вы оцените по достоинству.

4) Нумерация строк. Честно говоря, не уверен, что она нужна.

Теперь о недостатках.

Прежде всего, взгляните на скриншот.

code editor

Видите, редактор WP Advanced Code Editor встраивается как бы внутрь стандартного редактора WordPress. И сразу же обратите внимание на чекбокс «Toggle editor» (под окном).

Как несложно догадаться, этот чекбокс включает/отключает дополнительный редактор. И тут возникает вопрос: «А зачем это вообще нужно? Ведь Advanced Code Editor дополняет редактор WP».

Оказывается не все так просто. Этот редактор не дополняет, а заменяет стандартный. Проще говоря, при включенном Advanced Code Editor не работают кнопки стандартного редактора (b, i, link и т.д.).

Т.е. работать приходится следующим образом.

Сначала при отключенном Advanced Code Editor (снят чекбокс Toggle editor) расставляем теги. Затем включаем этот редатор, переходим в полноэкранный режим (при желании) и проверяем пост.

Естественно, было бы значительно удобнее, если бы работали сразу оба редактора.

Но, с другой стороны, этот плагин появился совсем недавно, и будем надеяться, что эта функция появится в будущих версиях.

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

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

Тут все как обычно.

1) Распаковываем архив в папку wp-content\plugins.
2) Активируем. Перед этим шагом нужно убедиться, что отключен WYSIWYG режим стандартного редактора.

Примечание. Чтобы отключить WYSIWYG режима:
1) зайдите в меню User;
2) выберите пользователя под которым вы работаете (например, admin);
3) в разделе Personal Options снимите чекбокс около Use the visual editor when writing;
4) нажмите кнопку «Update Profile».

В общем, плагин очень интересный. И, надеюсь, разработчики будут его развивать.

  • Да, стандартный редактор в вордпрессе конечно неочень, когда нужно работать с тегами. Я просто вставляю теги в HTML-редакторе, а потом копирую в WP.

    • Мне, наверное, проще, т.к. пользуюсь в основном четырьмя: b, i, link (а), code. А их удобно и в стандартном редакторе вставлять.

  • Да, стандартный редактор в вордпрессе конечно неочень, когда нужно работать с тегами. Я просто вставляю теги в HTML-редакторе, а потом копирую в WP.

    • Мне, наверное, проще, т.к. пользуюсь в основном четырьмя: b, i, link (а), code. А их удобно и в стандартном редакторе вставлять.

  • да накрутили тоже хтмл пользуюсь…сподручнее…

  • да накрутили тоже хтмл пользуюсь…сподручнее…

  • для подсветки кода лучше всего использовать стендэлоне решения, например мое)

    http://phpdude.ru/code/

    • Сразу и не поймешь, для чего этот редактор у вас. Было бы лучше, если бы внизу была краткая справка по использованию.

    • Да, небольшая страничка со справкой была бы очень кстати.

  • для подсветки кода лучше всего использовать стендэлоне решения, например мое)

    http://phpdude.ru/code/

    • Сразу и не поймешь, для чего этот редактор у вас. Было бы лучше, если бы внизу была краткая справка по использованию.

    • Да, небольшая страничка со справкой была бы очень кстати.

  • А как Вам такая подсветка кода?

    • Вы имеете в виду подсветку на вашем блоге?
      Мне понравилось, красиво выглядит.
      Вы вручную цвета подбирали?

      • Что за плагин для подсветки на том блоге стоит? Очень понравился подскажите плз!

        • У меня — Dean's Code Highlighter. А вот у Сергея — не знаю.
          Вообще практически все плагины позволяют изменять цвета.

        • Спасибо.

  • А как Вам такая подсветка кода?

    • Вы имеете в виду подсветку на вашем блоге?
      Мне понравилось, красиво выглядит.
      Вы вручную цвета подбирали?

      • Что за плагин для подсветки на том блоге стоит? Очень понравился подскажите плз!

        • У меня — Dean's Code Highlighter. А вот у Сергея — не знаю.
          Вообще практически все плагины позволяют изменять цвета.

        • Спасибо.

  • Пасиб, будет удобней в коде ковыряться.

  • Пасиб, будет удобней в коде ковыряться.

  • У меня самописный движок для блога, и решил как-то тоже прикрутить подсветку кода.
    Нашел штук 5 плагинов для WordPress. Но в каждом есть какой-то изъян.
    Несколько из них как раз с тэгами . Жесткие проблемы начинаются, когда внутри содержатся тэги — плагин их «интерпретирует».
    В итоге скачал библиотечку geshi и за час написал свою подсветку кода и интегрировал в движок.

    • Но в каждом есть какой-то изъян

      Это точно 🙂

      А не рассматривали вариант с использование JS библиотек для подсветки?
      Мне лично вариант с GeShi больше нравиться, т.к. подсветка не зависит от браузера и поддерживается больше языков. Но интересно ваше мнение.

  • У меня самописный движок для блога, и решил как-то тоже прикрутить подсветку кода.
    Нашел штук 5 плагинов для WordPress. Но в каждом есть какой-то изъян.
    Несколько из них как раз с тэгами . Жесткие проблемы начинаются, когда внутри содержатся тэги — плагин их «интерпретирует».
    В итоге скачал библиотечку geshi и за час написал свою подсветку кода и интегрировал в движок.

    • Но в каждом есть какой-то изъян

      Это точно 🙂

      А не рассматривали вариант с использование JS библиотек для подсветки?
      Мне лично вариант с GeShi больше нравиться, т.к. подсветка не зависит от браузера и поддерживается больше языков. Но интересно ваше мнение.

  • Один из плагинов как раз реализовывал подсветку с помощью JavaScript. Уже не помню в чем там был косяк , но он был 🙂

    Я тоже остановился на Geshi, так как JavaScript из-за различной интерпретации его разными браузерами вешь очень неудобная.

    На JavaScript можно сделать копирование plain кода в буфер — вот это удобно, а то в моем варианет при копировании сохраняются символы '#'.

    • Есть еще вариант. Подсветку сделать с помощью GeShi, и добавить около каждого блока с кодом ссылку «Убрать нумерацию», клик по ней будет вызывать js функцию, которая уберет нумерацию.

  • Один из плагинов как раз реализовывал подсветку с помощью JavaScript. Уже не помню в чем там был косяк , но он был 🙂

    Я тоже остановился на Geshi, так как JavaScript из-за различной интерпретации его разными браузерами вешь очень неудобная.

    На JavaScript можно сделать копирование plain кода в буфер — вот это удобно, а то в моем варианет при копировании сохраняются символы '#'.

    • Есть еще вариант. Подсветку сделать с помощью GeShi, и добавить около каждого блока с кодом ссылку «Убрать нумерацию», клик по ней будет вызывать js функцию, которая уберет нумерацию.

  • Тоже вариант, жалко что я не особо силен в JS. Надо заставить себя поизучать jQuery. Брат просто в восторге от этой библиотечки.

  • Тоже вариант, жалко что я не особо силен в JS. Надо заставить себя поизучать jQuery. Брат просто в восторге от этой библиотечки.