Самый легкий и удобный плагин для подсветки кода в WordPress

Самый легкий и удобный плагин для подсветки когда в WordPressНаверное, многие заметили, что в некоторых своих статьях я вывожу код в особом стиле. Так очень удобно для читателей, ведь в таком оформлении код заметно выделяется среди сплошного текста. Однако по умолчанию в WordPress сам код красиво вывести не получится. В решении этой проблемы мне хорошо помогал плагин Crayon Syntax Highlighter. Этот плагин мне очень нравился. Нравился до того момента, пока я не решил просканировать нагрузку от установленных плагинов. 

Как обычно, сканировал я плагином P3 (Plugin Performance Profiler). Кто не знает о нем, обязательно почитайте и установите этот плагин. В общем, когда он мне показал статистику нагрузки, я увидел вот такой вот результат:

Большая нагрузка от плагина Crayon Syntax Highlighter

А-а-а-а. Мать ее матери!!! По графику я увидел, что какой-то «комбайн» буквально один сжирает почти половину всеобщего пирога. Как оказалось, виновником стал плагин Crayon Syntax Highlighter. Я когда раньше его устанавливал, даже подумать не мог, что он будет таким прожорливым. Просто этот плагин мне очень понравился. С его помощью вставку кода можно реализовать очень быстро и просто. Также мне нравилось, что в нем можно выбрать очень классные темы для подсветки кода. Мало того, прямо в плагине можно создать свою собственную тему. Таким образом, в своих статьях можно выводить классное и очень удобное оформление кода.

По сравнению с оформлением от Crayon, другие темы сторонних плагинов и рядом не стояли. Последние, как правило, выглядят ну очень простенько и к тому же без дополнительных возможностей. В общем, как говориться: «Красота требует жертв!» Однако видал я такие жертвы, когда только с одного плагина приходится терять чуть ли не пол секунды драгоценного времени. Поэтому этот многофункциональный плагин-комбайн пришлось отфутболить куда подальше. Мне, конечно же, не хотелось с ним расставаться. Но, что поделаешь! После этого пришлось искать замену.

Мне попадались всякие плагины. Однако на этот раз я решил подыскать такой, с которым было бы очень просто работать и при этом не страдать от сильной нагрузки. В итоге, мой выбор пал на WordPress Rainbow Hilite. Почему именно он? Во-первых, данный плагин создает мизерную нагрузку на блог. Во-вторых, с его помощью сам код можно легко вывести в нужной статье. Так что давайте рассмотрим этого подопытного более подробно.

Настройка плагина WordPress Rainbow Hilite

Итак, приступим! После установки и активации этого плагинчика переходим в меню «Настройки» —> «Написание«. На странице в самом низу вы найдете все настройки (Code Highlighting) этого плагина. Опций там совсем немного:

  • Visual Theme — тут плагин из выпадающего списка предлагает нам выбрать какую-то тему. На данный момент доступно 19 тем. Также обратите внимание, что рядом есть кнопка «Toggle Sample Code«. Нажмите на нее, чтобы начать просматривать превью тем. Так очень удобно. Вы выбираете нужную тему из общего списка и одновременно видите ее оформление.

Настройка Visual Theme в плагине WordPress Rainbow Hilite

  • Show Line numbers — эта настройка отвечает за нумерацию строк в коде. Я рекомендую здесь поставить галочку. Всегда в своем коде выводите нумерацию строк. Так очень удобно для посетителя, так как можно легко ориентироваться в коде. Да и как-то красиво смотрится эта нумерация в общей теме. Поэтому всегда выводите нумерацию строк.

Show Line numbers - нумерация строк

  • Enable Languages — здесь нужно отметить те языки программирования, которые вы собираетесь использовать на своем сайте. На данный момент доступно только 18 языков. Можно выбрать только самые необходимые.

Enable Languages - выбор языка программирования

  • Load Minified scripts — дает возможность подключать сжатые скрипты плагина, то есть создавать минификацию кода. Если вы используете сторонние плагины для сжатия кода или же подключаете к этому плагину какие-то свои языковые пакеты, то галочку в этом пункте не ставим. В остальных случаях галочку можно поставить. Особенно это будет полезно, если вы в опциях данного плагина выбрали все языковые пакеты. Таким образом, можно уменьшить время загрузки скриптов.

Load Minified scripts - минификация кода в плагине WordPress Rainbow Hilite

Как работать с плагином?

Итак, с опциями мы разобрались. Теперь давайте попробуем поработать с плагином. Для этого переходим к редактированию какой-нибудь записи. В самом визуальном редакторе теперь можно заметить две новые кнопки:

  • Code Language (2) — в этом выпадающем списке отображаются те языки программирования, которые мы подключали в самих настройках плагина. В принципе эта кнопка лишняя, так как выбрать нужный язык можно в Code Properties.
  • Code Properties (1) — здесь уже мы прописываем свойства вставленного кода.

Подсветка кода в WordPress Rainbow Hilite

Как проще сделать подсветку синтаксиса кода? А сделать ее легко можно прямо в визуальном редакторе. Однако обратите внимание, что после вставки кода, кнопки плагина в редакторе не активируются, то есть они не работают (рисунок выше). Чтобы это исправить вставленный в статью код мы еще раз выделяем и в окошке «Формат» выбираем «Отформатированный«. Только после этого кнопки активируются. Так что здесь будьте внимательны. С обычными текстовыми форматами создать подсветку кода в CMS WordPress вам не удастся.

Изменяем формат записи в WordPress

Итак, после того, когда мы задали нужный формат, нажимаем на кнопку Code Properties (1). Во всплывающем окне задаем свойства для вставленного кода. Тут указываем язык программирования, включаем или отключаем нумерацию строк, а также задаем первоначальный номер строки.

Code Properties - задаем свойства подсветки кода на сайте

Как я говорил ранее, старайтесь всегда выводить нумерацию строк. Это не только красиво, но и удобно. Так вы можете указать номер строки, с которой начинается ваш код. Например, 359. Таким образом, человеку не нужно перешаривать весь код в файле. Он уже знает, что с 359 строки будет идти нужный ему фрагмент кода. Поэтому всегда выводите нумерацию и не забывайте указывать, с каких строк начинается ваш код. Все, теперь сохраняем все изменения, переходим на страницу и любуемся. Вот и вся работа!

Недостатки плагина

Как говориться: «Нет ничего совершенного«. Так и здесь. Есть как плюсы, так и минусы. Давайте сначала поговорим о минусах.

1Мало языковых пакетов. К сожалению, плагин на данный момент поддерживает только 18 языков программирования. Можно конечно подключить дополнительные языки, но я пока не разбирался в этом вопросе. Однако главная суть в том, что первоначальный выбор не велик. Но тут не все так плохо. Как правило, в плагине присутствуют самые популярные языки программирования. Они используются на многих сайтах. В основном это язык php, css, Javascript и так далее. Так что, для многих блогеров это терпимо.

А если же вы углубленно занимаетесь программированием и используете различный набор языковых пакетов, то я вам рекомендую вместо этого плагина устанавливать WP-Syntax. В отличие от других плагинов, этот обладает самым большим набором языков. Их там больше сотни. Так что такой вариант для вас будет весьма подходящим.

2Убогие темы. Конечно, в отличие от Crayon Syntax Highlighter, плагин WordPress Rainbow Hilite предлагает нам темы далеко не высокого качества. Для меня они уж довольно простенькие. Однако тут тоже не все так плохо. Нужную вам тему можно подогнать под себя. Я лично так и сделал. За основу взял тему «Pastie«. В ней я закруглил острые углы, добавил тень и создал цветовой фон для нумерации строк. В итоге, получилось немножко лучше.

Набор тем в плагине WordPress Rainbow Hilite

Все темы лежат по адресу wp-content/plugins/wp-rainbow-hilite/css/themes. Там и лежат стили для всех установленных тем. Что от вас требуется, так это взять за основу подходящую тему и внести некоторые изменения в файл стилей этой темы. Также нужно помнить, что при обновлении плагина все ваши стили слетят. Поэтому всегда держите у себя копию CSS-файла. После обновления плагина вы всегда сможете снова загрузить свои таблицы стилей.

3Нет автоматического определения языка. За что мне еще нравился Crayon, так это автоопределение языка программирования. Вам только и всего, что нужно просто вставить код. Далее плагин уже сам определяет язык и правильно формирует код в нужной статье. С Rainbow такое уже не прокатит. Здесь нужно самому указывать нужный язык. Так что будьте внимательны! Если вы указали не тот язык программирования, то ваш код может неправильно отображаться. Например, обрежутся теги. Поэтому всегда проверяйте свои скрипты после вставки.

Достоинства плагина

Ну а теперь поговорим о приятном! Вообще, за что я выбрал этот плагин?

1Низкая нагрузка на блог. По данным сканирования P3 (Plugin Performance Profiler) получилось следующее (значения не стабильные и могут иметь небольшие отклонения):

  • WordPress Rainbow Hilite — 0,0031 с;
  • WP-Syntax — 0,0192 c;
  • Crayon Syntax Highlighter — 0,4038 c.

Видно, что плагин по скорости быстрее, чем WP-Syntax. Хотя последний тоже легкий. Он даже не имеет никаких опций. Просто такая небольшая нагрузка обусловлена огромных количеством языковых пакетов. Ну а про Crayon я вообще, говорить не хочу. Для увеличения скорости загрузки сайта рекомендую его поменять на один из вышесказанных расширений.

2Легкая подсветка кода. Очень радует, что подсветку синтаксиса кода на сайте WordPress можно осуществлять, не заходя в html-редактор. Это очень удобно. Вставил код, выбрал формат, задал нужные свойства и все! Не нужно лезть в html-редактор и вручную прописывать теги и определенные свойства.

3Отображение языка. Обратите внимание, что когда вы в визуальном редакторе оформили подсветку кода, то с правой стороны отобразится вид языка программирования. Так очень удобно. Бывает, что в одной статье опубликовано очень много примеров скриптов. А зайдя в визуальный редактор, плагин напротив каждого кода высвечивает вид языка. Таким образом, не нужно лишний раз кликать на код, чтобы узнать язык. Все уже видно! Мелочь, а приятно!

Отображение языка программирования в WordPress

4Адаптивная подсветка кода. Обычно при оформлении кода многие плагины выводят нижнюю полосу прокрутки. Это когда строки кода слишком длинные. Этот же плагин так не делает. Часть кода просто переносится на новую строчку. Получается такая своеобразная адаптивная тема подсветки синтаксиса кода. Так очень удобно! Не нужно лишний раз передвигать ползунок, чтобы увидеть часть строчки. Весь код будет виден целиком. Единственное, это может быть не всегда красиво.

Адаптивная подсветка кода в плагине WordPress Rainbow Hilite

5Не копируются нумерации строк. Вот в некоторых плагинах есть такой неудобный косяк. При копировании кода может копироваться и сама нумерация строк. Потом же после вставки приходится лишний раз удалять эти числа. Таким образом, нужно внимательно выделять скрипт, чтобы не захватить числа строк. В этом плагине такой косяк отсутствует. При выделении кода можно видеть, что выделяется и нумерация (3). Однако при копировании она не учитывается (4).

Удобное копирование кода на сайте WordPress

Стоит ли мне использовать этот плагин?

Если вы углубленно не занимаетесь работой со многими языками программирования, то этот плагин вам подойдет. В нем есть только популярные языки. В принципе, больше и не нужно! Также для легкой и быстрой работы с кодом, плагин специально интегрируется в визуальный редактор. Теперь не нужно самому вручную прописывать все необходимые теги и свойства для кода. Для многих людей эта возможность будет весьма полезной.

Ну а если вы углубленно занимаетесь программированием и работаете со многими языками, которых нет в этом плагине, то я вам рекомендую работать только с WP-Syntax. Этот плагин содержит очень большое количество языковых пакетов. Также в нем нет ничего лишнего. Никаких опций он не имеет. Даже лишних тем нет! Стоит только одна дефолтная. Поэтому для вас это будет оптимальным вариантом. Только свойства кода нужно прописывать вручную. Плагин не интегрируется в редактор.

Что касается Crayon Syntax Highlighter, то он, скорее всего, предназначен для повышения юзабилити и улучшения дизайна на сайте. Если его устанавливать, то только на сайты с высокой скоростью загрузки. Если владелец такого сайта не жалеет денег на хостинг, все время старается улучшить юзабилити и само оформление сайта, то этот плагин ему вполне может подойти. В остальных случаях я не вижу смысла его ставить.

Хочу подчеркнуть, что если вы в своих статьях хотите выводить подсветку кода, то ни в коем случае не подключайте сайт к сервису Tynt. Во-первых, когда человек будет копировать ваш код, то при вставке будет прописываться ссылка на вашу статью. Это может плохо сказаться на работе скрипта. Во-вторых, при вставке вид самого кода портится. То есть он принимает вид обычного текстового предложения. Это очень неудобно! Поэтому, если вы используете подобную функцию на своем блоге, то от сервиса Tynt я рекомендую отказаться (если, конечно же, он подключен)

Итак, мы рассмотрели настройку и работу плагина WordPress Rainbow Hilite. Я перепробовал несколько плагинов для WordPress, но пока остановился на этом. Он самый легкий и удобный. Сильно нагружать блог он уже не будет. А с помощью интеграции с редактором, создание подсветки кода становится еще приятнее и удобнее. Если вам нужно вывести код в своих статьях, то вы уже знаете, в какую сторону копать. Удачного блоггинга!

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 Нажимая на кнопку, вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.

Комментарии 49

  • Сергей, можно вопрос? Я смотрю ты отключил кликабельность URL автора комментария…в связи с чем?)

    • Привет, Оля! Ссылки комментаторов я давно не вывожу. Почему отключил? Просто очень часто оставляют спамные комментарии ради ссылок в профиле. Обычно это небольшие шаблонные комментарии. Поэтому решил не выводить ссылки в имени (они только в админке выводятся). Не хочу засорять этот блог бесполезными и шаблонными сообщениями. Да и заодно можно избавиться от битых ссылок или ссылок на плохие сайты.

      К сожалению, ручной спам иногда проскакивает. Но это в основном от новоиспеченных комментаторов. Старые же ручные спамеры давно просекли, что ловить здесь нечего. *sarcastic* Они уже слились и не комментируют. :-)
      Поэтому для меня важно не количество, а качество комментариев. Кому надо, тот обязательно прокомментирует! Пусть будет меньше, но зато по делу!

  • Всё понятно, пусть оставляют комментарии по делу, а не ради ссылки!
    А я в расстройстве,..не могу разобраться почему Гугл не удаляет дубли…всё вроде настроено (301 редирект,метатег noindex ), а в основном индексе только 7%..и не прибавляет после смены шаблона…уже месяц прошёл. Что делать?

    • Да, Гугл непредсказуем. Вот у меня раньше была уникальность 52%. Буквально на этой неделе я заметил, что она подскочила аж до 100%. А уже позавчера она стала на 86%. Ерунда какая-то. Причем странно получилось, что Гугл откуда-то взял у меня очень старые файлы, которых уже давно у меня нет. Не знаю, откуда он спер это все. Придется сегодня в вебмастере делать запрос на удаление этих файлов.

      Оля, я посмотрел, у тебя этих дублей вроде и не много. Сейчас RDS-BAR показывает 14%, но по идее должно быть больше. У тебя там немного страниц с дублями. Парочку страниц пагинации, replytocom и atachment. Попробуй в вебмастере удалить эти страницы. Возможно, будут непонятные скачи уникальности (то расти, то падать). Но потом в итоге % уникальности должен стать нормальным, то есть большим.

  • Сергей, а у меня 7% показывает RDS-BAR странно))) Да бог с ним этим Гошей))) у него семь пятниц на неделе. Я тоже проверяла все параметры дублей, так и не поняла, что он забрал….почему так резко понизил % основного индекса. Ведь начал расти, уже было 34% и всё рухнуло) Опять в яме))) Буду ждать! милости!

    • Да, скачки тут большие. Вот я когда начал удалять дубли у меня было 21%. Когда все позакрывал, я начал в вебмастере удалять дубликаты. Их там много было. Дня три удалял. *mosking* Ну после этого по идее % должен вырасти, но нет. Он скатился до 10%. Я после этого дела плюнул и забил! Тут изворачиваешься-изворачиваешься, а он на тебе! Еще меньше сделал. После этого я ничего не делал.

      Потом буквально месяц прошел, и начал % понемногу расти. Сначала было 14, потом 17 и по возрастающей. Так что не переживай. *don-t_mention* Главное, чтобы внутри сайта ненужные страницы были закрыты от индексации. Тогда поисковики сами исключат их из индекса. Это обычно происходит после апдейта поисковой системы.
      Главное, чтобы трафик с поисковых систем был хороший. Вот у меня хоть дублей не так много, а трафик с Гугла в два раза меньше, чем у Яндекса. Раньше когда было больше дублей, было наоборот. Вот и пойми тут в чем дело. *mosking*

  • Сергей, а ты как продвигаешь блог?)

    • Оля, а ни как! *mosking* Ссылки вообще, ни одной за свою жизнь еще не покупал. В Subscribe сейчас анонсы не делаю. На трастовых сайтах не регистрируюсь. В социальных сетях тоже не продвигаюсь. После написания поста отправляю анонс в три сети. Вот и все продвижение. :-)

      • Прикольно, ждёшь взрыв поискового трафика!) :-) Всё же в Ютубе, надо продвигаться) Кстати, это лучшая альтернатива соц. сетям всем вместе взятым. Я всё не могу заставить себя делать видеоролики, а надо. Поисковики их любят))) да и многие не умеющие читать тоже=)
        Ты отличный собеседник. Спасибо, Сергей, за советы.

        • Всегда пожалуйста! :-)
          Да, ты права. Ютуб — это хороший инструмент. Я вот тоже все никак не соберусь сделать видеоролики. Канал уже давно имеется, а видео так ни одного и не загрузил. :-(
          К стати, Оля, когда будешь записывать обучающие видеоролики, то звук записывай через USB-микрофон. Так не будет шумов, а сам человек сможет отчетливо услышать речь.

  • Спасибо, Сергей!) Вот только, как собраться записывать видео))) Сейчас сижу настраиваю рекламу в Яндекс Директ, пишу очередную статью, переписываюсь с тобой))) отвечаю на звонки с салона, днём сбегала покосила машинкой траву, приготовила ужин…. ещё учусь в коучинге, там тоже дом. задания + они мне настраивают бизнес-онлайн по моей теме)))) Прикольно!) и мне всё нравится, изучать, применять, экспериментировать)

    • Ну ты даешь! *shock* Столько дел у тебя. *wacko* Не, я так наверное, не смогу. Желательно что-то одно делать и не отвлекаться. Я вот бывает, как отвлекусь на что-нибудь, так потом совсем не хватает времени на первоначальные дела. Поэтому стараюсь так сказать, придерживаться «одной линии».
      Сейчас такое время, что очень большой поток информации. Даже не знаешь за что хвататься. И везде всему нужно учиться. Вот надо освоить, как правильно продвигаться в ютубе, как записывать ролики на комп и т.д и т.п. Уже мозг кипит. Проще конечно, дать денег и пускай они там сами все настраивают. Но это не всегда возможно.
      В общем, учиться, учиться и еще раз учиться!

  • Согласна во всём 100%) А выполнение сразу многих задач для женщин, это легко))) Вот мой муж … может или читать или телевизор смотреть, одновременно не может, внимание рассеивается. А женщины могут))) одновременно за детьми смотреть, ужин готовить, телевизор смотреть, по телефону говорить…))) Я как сама об этом подумаю смешно становится… Многозадачность, это нормально) Единственное, всё делать на отлично, конечно, не получается=) Кстати, ты принимаешь участие в конкурсе на бесплатный SEO- АНАЛИЗ блога. Я рискнула)))

    • Не, в таком конкурсе я не участвую. В принципе, если говорить о внутреннем анализе блога, то многие косяки я знаю. Вот сейчас потихоньку исправляю. А про внешнюю оптимизацию, так я ей и не занимаюсь. В принципе, понимаю ее полезность, но с другой стороны хочется естественности. Не охота там сильно накручивать поведенческие факторы, затариваться тоннами ссылок и так далее. Поэтому наверное, я за такое время сильно не раскрутился.
      Вот сейчас потихоньку внутренней оптимизацию занимаюсь. Исправляю тексты, работаю с плагинами, улучшаю юзабилити и так далее. Смотрю, немного показатели лучше стали. Конечно, не на много. Однако мелочь, а приятно. :-) Оля, ты потом напиши у себя про итоги конкурса. С удовольствием прочитаю!

  • Сергей, подскажи, можно ли изменять текст статьи на блоге, как к этому относятся поисковые системы? :-(

    • Ну, тут смотря в какую сторону изменять текст. Если изменить только под себя, то есть так, что будет сильно много ключевых слов, не релевантных ссылок и так далее, то вряд ли поисковики одобрят эти изменения. Если изменять, то только в лучшую сторону.
      Например, удалять ошибки в текстах, делать уникальные заголовки и описания, обновлять статьи свежей и уникальной информацией (если статья устарела) ставить ссылки только на нужный материал, правильно заполнять теги и так далее, то хуже от этого точно не станет. Также нужно работать над улучшением текста. То есть, где-то сделать маркированный список, где-то таблицы и шорткоды, где-то красиво вывести подсветку кода в статье и так далее. То есть сделать свои статьи привлекательными и качественными. Тогда точно будет толк! Вот такие изменения поисковики точно полюбят. Да и не только поисковики.
      В первую очередь для людей будет хорошо. Так что Оля не бойся изменять свои тексты в лучшую сторону. Главное думать о посетителе, а не только о раскрутке в поисковых системах.

  • Хороший и полезный плагин, если рыться в кодах, как я раньше *dash* . Сейчас это дело немного забросила… Все оптимизирую))). Сергей, удалите буковку «г» в слове кода в заглавии и будет просто загляденье *good* .
    О нагрузке плагинов — пару дней назад поставила себе Broken Link Checker для выявления битых ссылок и не смогла ни на сайт зайти (он просто грузился 10 минут безрезультатно), ни в админ панель. Пришлось снести к чертовой бабушке через Fz-клиент. После этого сайт загрузился за секунду!

    • О, спасибо Ира! Подправил заголовок. Без тебя я бы и не заметил. :-)
      А этот плагин WordPress Rainbow Hilite тебе и не нужно устанавливать. Он пригодиться тем, кто у себя пишет статьи про программирование и создание сайта. Тогда приходиться в своих статьях выкладывать примеры кода. А с помощью этого плагина сделать подобное можно красиво и удобно. Для других же тематиках этот плагин будет бесполезным.
      Ира, а вместо плагина Broken Link Checker можно попробовать компьютерную программу Xenu. Она тоже ищет битые ссылки. Так что попробуй на досуге! *yes*

      • Сереж, да я как раз собираюсь этим заняться). О Ксене давно знала, но все руки не доходили. Прочитала, что с плагином быстрее :-D . Ага, как же)

        • Может, что с настройками не так. Я с этим плагином уже очень давно не работаю, поэтому к сожалению тут ничего подсказать не могу. А вот проверять на битые ссылки нужно. Именно из-за них поисковики могут подкинуть какую-нибудь подлянку.
          Я когда раньше выводил ссылки комментаторов, то тоже проверял на битые ссылки. Находил большинство хороших блогов, которые либо накрылись большим «медным тазом», либо сменили владельца и превратились в ГС. Также бывает, что совсем заброшены, заражены вирусом или под АГС. В общем, не буду тебя пугать. *mosking* А проверять на битые ссылка раз 1-2 недели не помешает. *yes*

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

  • Сергей, привет. Я вручаю тебе Награда Liebster Blog Award. Все подробности у меня на блоге, в последней статье. *bye*

    • Привет, Оля! Спасибо тебе, хоть и не знаю за что. *mosking* Завтра забегу к тебе. Сегодня пока некогда.

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

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

    Лично я предпочитаю простейшее CSS форматирование. Например:

    pre,code,.code{
    color:#369;
    font-family:"Fira Mono","Source Code Pro",monospace;
    }
    p.code{
    background:#eee;
    border-left:3px solid #CC3333;
    margin:20px 0;
    padding:7px 10px;
    overflow-x:auto;
    text-align:left;
    word-wrap:normal;
    white-space:nowrap;
    }

    Остальное оформление, если надо, произвожу вручную. Здесь я подразумеваю именно расстановка акцентов, а не подсветку синтаксиса.

    К слову, я предпочитаю именно параграф p.code, а не тег pre, чтобы самому расстанавливать переносы.

    • Привет, Константин! В принципе, неплохой вариант предлагаешь. Я пока вывожу через тег pre. Параграфом еще не пробовал.

      А насчет посетителей, я как-то не уверен, что им наплевать на оформление. Если статья очень большая, то с хорошим оформлением код не трудно найти. Да и глазу приятно так. А некоторые вебмастера над кодом специально выводят дополнительную панельку с кнопками: Копировать, Выделить или открыть в новом окне. Я тоже такую раньше выводил, когда работал с плагином Crayon Syntax Highlighter. Просто не редко бывает так, что человек по невнимательности сможет плохо скопировать код (например, пропустит символ или еще что-то). Поэтому хорошее оформление очень полезно для юзабилити сайта.

      • Давай по пунктам, а то я легко теряю нить дискуссии.

        1. Использование параграфа позволяет контролировать расстановку переносов, не заморачиваться с отступами блока и не думать о проблемах отображения без CSS. Последнее особенно актуально, когда строки в коде длинные.

        2. Я вижу много уродливых (конечно, в моём понимании) сайтов, но это не мешает им иметь хорошую посещаемость и живую аудиторию. Другое дело, когда речь идёт о структурировании контента. Здесь заголовки, списки и т.д. в помощь. Для выделения фрагмента кода вполне достаточно и приведённого выше оформления.

        3. В целом, код в статье обычно приводят фрагментарно для его пояснения. Готовый результат обычно публикуют на том же jsfiddle.net и это куда как удобней для пользователя, т.к. позволяет увидеть результат работы решения. По крайней мере, для HTML/CSS/JavaScript это возможно.

        4. Что до дополнительных панелек, то сам я не люблю всех этих изысков, т.к. всё это дополнительная нагрузка на сайт. Выделять, копировать и т.д. я предпочитаю вручную. Если же учесть, что у каждого это реализуется по своему, то это получается лишняя нагрузка на пользователя. Здесь я могу привести слова Стива Круга, специалиста по юзабилити: не заставляйте меня думать – и тут мне добавить нечего.

        В целом же всё это достаточно субъективные моменты. С моей точки зрения, многое упирается не в удобство пользователя, а в удобство автора сайта и это правильно.

        • 1,2) Константин, я пока пользуюсь плагином и мне так удобнее. О твоем способе я не знал и пока не пробовал. Да и с кодом я так углубленно пока не работаю. В статьях я очень редко привожу какие-то фрагменты кода. Просто пока по теме статей не было необходимости это делать.

          3) Пока так не пробовал. Обычно, приводил только фрагменты кода. Готовые результаты не показывал. Даже как-то и не задумывался об этом.

          4) Да, лишняя нагрузка. Но просто при копировании, у некоторых бывает захватывается нумерация строк. Придется по новой внимательно выделять все. А если нужно скопировать большой фрагмент кода, то иногда это становится проблемой.

          • 1,2) ну, HTML это не такая уж великая премудрость, если интересно сабж (если что, можешь удалить ссылку).

            Сам я пишу статьи в MS Word. Потом копирую в специально заточенный под свои CSS-надстройки онлай визивигн редактор на движке tinymce, если интересно сабж (ну, ты знаешь). Дальше копирую исходный HTML-код и вставляю на блог (у меня он на Blogger).

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

            3) Да, это несколько напрягает. Тут хоть статью опубликовать. Но в целом – юзерфрендли.

            4) Не люблю нумерацию кода. Вместо ссылки в тексте на номер его строки, я использую именно фрагмент. Таким образом, пользователю не надо мататься из одной части статьи к другой, хотя это и может оказать определённое влияние на ПФ… наверное.

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

              А я практически и работаю с визуальным редактором. Пишу прямо в WordPress. Знаешь, уже как-то привык к нему. :-) Ну иногда, если нужно код какой-то подправить, переключаюсь на html-редактор. Многие еще рекомендуют использовать Windows Live. Но я им пока еще не пользовался. В принципе, уже как-то привык к стандартному редактору WordPress.

              • Нет, чтобы сразу в блог… для меня это перебор. Браузер конечно проверяет орфографию, но как быть с грамматикой? Я и так по человечески излагаюсь с трудом, а тут ещё сложносоставные предложения могут выдать шокирующий результат.

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

                Windows Live редкостная и корявая имхо дрянь… имхо, но что-то утверждать не возьмусь. Как таковой, не столь уж и важна вся эта дребедень, как и в случае с дизайном, главное чтоб пользователь нашел решение, и автор был хорошим человеком… имхо :D

                • но как быть с грамматикой?

                  Грамматику я проверяю в Ворде. То есть сначала пишу на самом блоге (уже привык так), потом, когда статья написана, проверяю ее на ошибки в MO Word. Звучит странно, но я привык писать сразу на блоге. Может сказывается атмосфера и оформление админки, или какие-то опции (например, сео-плагина) точно не скажу. *unknw*

                  Windows Live редкостная и корявая

                  Обычно многие хвалят ее. Однако говорят, что могут возникать некоторые баги при экспорта текста с Windows Live на сам блог WordPress. Ну а я так ею ни разу не пользовался. Она у меня так висит установленная на компьютере, но с ней еще даже не работал. Мне и стандартного редактора WordPress хватает + офис для проверки ошибок.

  • У меня стоит подобный плагин, работал исправно. А теперь поменяла тему и получается конфликт: текст обрезается и не все помещается в видимую контентную часть. Печалька…

    • А вот и спамер! *diablo* То, что вы написали, к этому плагину не имеет никакого значения. Неужели не надоело писать бредовые комментарии ради ссылки на продвигаемую статью?

      • Сергей, удивили :) Если Вы не поняли, о чем речь, это не значит, что коммент не к месту…. Рассказала о своей проблеме, думала, помогут чем. Спасибо за человеческое отношение…

        • Извините, если обидел вас, но ваше поведение склонно на спамерское. Во-первых, спамеры часто прописывают ссылки не на главную, а на конкретную продвигаемую страницу. Во-вторых, ваш блог не связан с программированием, поэтому у вас этого плагина вовсе не должно быть, а значит и проблем тоже. Поэтому вы скорее всего просто не читали этот пост и просто написали отбалды. Да и конкретно о своей проблемы вы не написали.
          Поэтому пишите всегда по делу. И не считайте меня злым. Просто меня уже достала эта вакханалия в комментариях. Пишите всегда развернуто и по делу. Если действительно будут какие проблемы, я всегда подскажу если смогу. Но не нужно вводить в заблуждение.

  • incomeeasily.ru/nachinayushhemu-blogeru/kak-vstavit-kod-html-v-statyu-wordpress это моя статья о плагине, который я использую. Но когда поменяла тему, «прокрутка» (как на картинке у меня) перестала работать и тупо обрезается полем контентной части. То есть то, что поместилось, поместилось, остальное — обрезается и становится невидимым.

    Да, и честно говоря, отпало желание комментировать Ваш блог. Простите…

    • Надежда, ну так нужно было в первом комментарии так и написать: «Так и так, использую плагин WP-Syntax Button, но ничего не работает и так далее«.
      А так никакой конкретики нет. Да и ссылку в поле Сайт вы давали не на свой плагин, а на другую статью про организаторские способности, то есть сами же вводите меня в заблуждение.

      А теперь к делу. Плагин WP-Syntax Button удалите. Он старый, последнее его обновление было аж в 2009 году. Поэтому не удивительно, что после смены темы он у вас не работал. Да и сам плагин похоже должен работать в связке с WP-Syntax. В общем, я рекомендую вам вместо него пока установить WordPress Rainbow Hilite. Вы же его наверное, не пробовали устанавливать? Установите и посмотрите, как он будет работать. Как я писал, у него тема адаптивная. Там нет прокрутки, просто часть начинается с новой строки.

      Если вдруг этот плагин не пойдет, то вместо него можно попробовать Better WordPress Syntax Highlighter. Очень хорошая альтернатива. Он тоже, как и WordPress Rainbow Hilite позволяет работать прямо в визуальном редакторе. Да и нагрузки на блог существенной не дает. Единственное различие в оформлении. Тема в нем фиксированная. Она никуда не съезжает, также в ней есть прокрутка.

      В общем, сначала попробуйте WordPress Rainbow Hilite. Если что, то можно заменить на Better WordPress Syntax Highlighter. Возможно, сразу после установки подсветки кода не будет. В таком случае вам просто нужно в html-редакторе (текст) задать нужные теги и свойства для кода. Просто некоторые плагины могут работать с тегом pre, а некоторые только с code. Поэтому это тоже нужно учитывать.

      P.S. И не держите на меня зла. :-) Просто нужно конкретно описывать свою проблему и не вводить человека в заблуждение. :-)

1 2

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку «Отправить», вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.