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

Плагин для подсветки когда в WordPress Плагины WordPress

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

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

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

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

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

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

А-а-а-а. Мать ее матери!!!

По графику я увидел, что какой-то «комбайн» буквально один сжирает почти половину всеобщего пирога. Как оказалось, виновником стал плагин Crayon Syntax Highlighter.

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

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

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

По сравнению с оформлением от Crayon, другие темы сторонних плагинов и рядом не стояли.

Последние, как правило, выглядят ну очень простенько и к тому же без дополнительных возможностей. В общем, как говориться: «Красота требует жертв!»

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

Мне, конечно же, не хотелось с ним расставаться. Но, что поделаешь! Пришлось искать замену.

Мне попадались всякие плагины.

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

Почему именно он?

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

Настройка плагина 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

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

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

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

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

Как проще сделать подсветку синтаксиса кода? А сделать ее можно прямо в визуальном редакторе.

Однако обратите внимание!
После вставки кода, кнопки плагина в редакторе не активируются. То есть они не работают (рисунок выше).

Чтобы это исправить вставленный в статью код мы еще раз выделяем и в окошке «Формат» выбираем «Отформатированный«. Только после этого кнопки активируются.

Так что здесь будьте внимательны.

С обычными текстовыми форматами создать подсветку кода в WordPress вам не удастся.

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

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

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

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

Как я говорил ранее, старайтесь всегда выводить нумерацию строк. Это не только красиво, но и удобно. Так вы можете указать номер строки, с которой начинается ваш код.

Например, 359.

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

Все! Теперь сохраняем все изменения, переходим на страницу и любуемся. Вот и вся работа!

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

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

Мало языковых пакетов.

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

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

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

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

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

Убогие темы.

Конечно, в отличие от Crayon Syntax Highlighter, плагин WordPress Rainbow Hilite предлагает нам темы далеко не высокого качества. Для меня они уж довольно простенькие.

Однако тут тоже не все так плохо.

Нужную тему можно подогнать под себя. Я лично так и сделал. За основу взял тему «Pastie«. В ней закруглил углы, добавил тень и создал цветовой фон для нумерации строк.

В итоге, получилось немного лучше.

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

Все темы лежат по адресу wp-content/plugins/wp-rainbow-hilite/css/themes. Там и лежат стили для всех установленных тем.

Что от вас требуется, так это взять за основу подходящую тему и внести некоторые изменения в файл стилей этой темы.

Также нужно помнить, что при обновлении плагина все ваши стили слетят. Поэтому всегда держите у себя копию CSS-файла. После обновления плагина вы всегда сможете снова загрузить свои таблицы стилей.

Нет автоматического определения языка.

За что мне еще нравился Crayon, так это автоопределение кода. Вам только и всего, что нужно просто вставить код. Далее плагин сам определяет язык и правильно формирует подсветку в нужной статье.

С WordPress Rainbow Hilite такое не прокатит.

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

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

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

Низкая нагрузка на блог.

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

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

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

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

Легкая подсветка кода.

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

Не нужно лезть в html-редактор и вручную прописывать теги и свойства.

Отображение языка.

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

Так очень удобно.

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

Все уже видно! Мелочь, а приятно!

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

Адаптивная подсветка кода.

Обычно при оформлении кода многие плагины выводят нижнюю полосу прокрутки. Это когда строки кода слишком длинные. Этот же плагин так не делает. Часть кода просто переносится на новую строчку.

Получается такая своеобразная адаптивная тема подсветки синтаксиса кода.

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

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

Не копируются нумерации строк.

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

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

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

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

Стоит ли использовать WordPress Rainbow Hilite

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

В принципе, больше и не нужно!

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

Для многих людей эта возможность будет весьма полезной.

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

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

Только свойства кода нужно прописывать вручную. Плагин не интегрируется в редактор.

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

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

Если хотите выводить подсветку кода, то ни в коем случае не подключайте автоматическую вставку ссылки при копировании текста.

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

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

Итак, мы рассмотрели настройку и работу плагина WordPress Rainbow Hilite. Я перепробовал несколько плагинов для WordPress, но пока остановился на этом. Он самый легкий и удобный.

Сильно нагружать блог он уже не будет. А с помощью интеграции с редактором, создание подсветки кода становится еще приятнее и удобнее. Если вам нужно вывести код в своих статьях, то вы уже знаете, в какую сторону копать.

Сказать спасибо кнопками ниже:
Сергей

Занимаюсь созданием и продвижением информационных сайтов в интернете. Интересуюсь маркетингом, SEO и SMM. Осваиваю возможности полезного софта для работы.

Оцените автора
( Пока оценок нет )

Добавить комментарий

  1. Олия

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

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

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

      Ответить
  2. Олия

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

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

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

      Ответить
  3. Олия

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

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

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

      Ответить
  4. Олия

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

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

      Ответить
      1. Олия

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

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

          Ответить
  5. Олия

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

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

      Ответить
  6. Олия

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

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

      Ответить
  7. Олия

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

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

      Ответить
  8. Ирина Лирнецкая

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

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

      Ответить
      1. Ирина Лирнецкая

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

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

          Ответить
  9. Эдуард

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

    Ответить
  10. Олия

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

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

      Ответить
  11. Константин

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

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

    Лично я предпочитаю простейшее 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, чтобы самому расстанавливать переносы.

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

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

      Ответить
      1. Константин

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

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

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

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

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

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

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

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

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

          Ответить
          1. Константин

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

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

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

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

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

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

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

              Ответить
              1. Константин

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

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

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

                Ответить
                1. но как быть с грамматикой?

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

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

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

                  Ответить
  12. Надежда Давыдова

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

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

      Ответить
      1. Надежда Давыдова

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

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

          Ответить
  13. Надежда Давыдова

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

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

    Ответить
    1. Надежда, ну так нужно было в первом комментарии так и написать: «Так и так, использую плагин 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. И не держите на меня зла. :-) Просто нужно конкретно описывать свою проблему и не вводить человека в заблуждение. :-)

      Ответить
  14. Надежда Давыдова

    Спасибо за развернутый ответ. Возможно, я нашла решение своей проблемы (если честно, из-за этого перестала писать на некоторые темы). Выберу время и протестирую, позже отпишусь.

    Кстати, ссылку даю на статью, которую прошу прокомментировать в ответ на мой комментарий. И мне казалось, я достаточно точно описала свою проблему :)

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

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

      Ну, а давать ссылки на конкретные статьи стоит только при необходимости. Например, при описании своей проблемы, как в нашем с вами случае. :-) Я перешел по ссылке, посмотрел, что с кодами статья не связана. Также побродил немного по вашему блогу, в надежде увидеть, как у вас выводится код в статьях, но так и не нашел. Поэтому и возник такой конфуз. :-(

      Ответить
      1. Надежда Давыдова

        Ну, если это для Вас принципиально, могу давать ссылку только на главную. Но выскажусь в защиту своего способа: у меня везде редиректы на перемещенные статьи, ну и вообще, что может быть проще, чем удалить битую ссылку после проверки? Раз в неделю обязательно следует это делать…

        А ссылки на внутренние страницы очень полезны и как ссылочная масса, и как фактор хороших поведенческих (меньше отказов при переходе). Так что я свое мнение не меняю :)

        Ответить
        1. Смотрите сами.
          По мне, так лучше приобрести одну открытую ссылку с хорошего сайта, чем 100 закрытых ссылок с неизвестно каких блогов. Эффекта больше будет, так как упор делается не на количество, а на качество.

          Ответить
          1. Константин

            К слову, сергей, я вижу что ссылки из поля «Сайт» у тебя не отображаются в комментариях. С одной стороны правильно, а с другой это идентификация автора… тут можно было бы использовать javascript псевдоссылки или хоть их текстовый вариант. Снова сорь за флуд.

            Ответить
            1. Спасибо, Константин. Сильно не переживай за флуд. :-)
              А я думал, чего это Гугл при выдаче в заголовках выводит мое имя. Может из-за этого в Гугле в два раза меньше стал поисковый траффик. Кто его знает. *unknw* Пока так оставлю, потом как время появится буду что-то смотреть подходящее. :-) Может поставлю псевдоссылки. Главное, чтобы комментировали не ради этих ссылок.

              Ответить
        2. Константин

          Привет, Надежда. Если Сергей позволит, я дам тебе SEO-hack, как правильно впаривать ссылки в комментариях:

          1. нужно чтоб ссылка вела на страницу, которая дополняла бы статью.
          2. нужно оставлять автору блога пространство для манёвра. Например, после ссылки указать что-то подобно: если что, ссылку можешь удалить.

          При этом игнорирование пункта 1 ведёт к очень большой проблеме именно для того кто впаривает ссылку… это уже SEO заморочки, расписывать их не буду. Игнорирование же пункт 2 приведёт к создавшемуся недопониманию. Ты же видишь я не вру, всё по делу, сама убедилась что так и есть, я просто расстолковал фишку :D

          Ну и ещё раз хочу извиниться перед Сергеем за то, что пришлось флудить. Это тоже важно, комментарии не в тему, а мы говорим о плагине, не есть гут.

          Ответить
          1. Надежда Давыдова

            Константин, спасибо за дополнение. Считаю, нет смысла давать людям указания. Они сами знают, что делать. Кто хочет, удаляет, кто хочет оставляет. Спасибо всем, приятно было познакомиться (пусть и с недоразумения).

            Ответить
  15. Надежда Давыдова

    Сергей, здравствуйте! Удалила свое старье и поставила Ваш WordPress Rainbow Hilite. Просто чудо! Теперь могу написать статью, которую откладывала в долгий ящик из-за своей нерешенной проблемы. А делов-то было.. Все решилось в четыре клика мышкой :)

    Ответить
    1. Ага, плагин хороший. *good* И главное, не создает большой нагрузки. Ну и очень удобно. Не нужно лезть в html-редактор. Так что используйте с удовольствием. :-)

      Ответить
  16. Егор

    Вот почему я Крайон Синтаксис и убрал нафиг. А сейчас редактировать заново вообще ужас. Пол дня потратить надо. *shock* Как я раньше не увидел твою статью. WP-Syntax у меня в теме не работает, раньше пробовал. WP-Syntax у меня не пашет на теме.

    Ответить
    1. Может не в теме проблема. Просто, могут быть не те свойства для кода заданы. Да и еще в WordPress есть один неприятный момент. Когда в html-редакторе вставляешь код и после переходишь на визуальный редактор, то движок обрубает этот код. Чтобы этого не было, в WP-Syntax при вставке кода нужно еще дополнительное свойство дописывать для кода (уже точно не помню как). Тогда будет все нормально. Сам пробовал — потом все нормально выходило. Код не обрубался и можно было свободно переключаться на другой редактор.

      Ответить
Adblock
detector