Как избавиться от Crayon Syntax Highlighter?

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.

Ну кто не знает этот плагин - Crayon Syntax Highlighter, который позволяет красиво выводить код в статьях! Хороший плагин, но очень проблемный, позже поймете почему. А еще стоит у меня плагин Special Text Boxes, тоже хороший плагин, который позволяет красиво оформлять цитаты. Но тоже проблемный! Решил я сегодня избавиться от этих плагинов раз и навсегда на всех своих сайтах.


Для тех кто не в теме покажу фото, как выглядит оформление того и другого плагина на этом сайте:

подсветка кода без плагинаСверху это Crayon Syntax Highlighter, а снизу Special Text Boxes - красавцы! Но как говорят у нас - не все то золото, что блестит. Чем же мне не угодили эти прелестные плагины? Причины тут две:

1. Подгружается МНОГО скриптов!
2. В плагинах много ошибок!

Специально проверил валидацию CSS до и после отключения этих плагинов - смотрим со включенными плагинами:

ошибки css442 ошибки! и 182 предупреждения! Круто, да? Теперь отключу плагины и проверю еще раз.

проверка cssВау! Всего 3 ошибки и 122 предупреждения! Видите разницу? Может это и не такая проблема для SEO, но в совокупности с тем, что первый и второй ОЧЕНЬ тормозят сайт своими скриптами, эти плагины достойны СМЕРТИ!

Но что же делать, у меня уже сотни статей, где стоит код этих плагинов и если их просто отключить, то все будет выглядеть ужасно? Я хочу сделать подсветку кода без плагина посредством CSS, но не делать же это все вручную? Конечно нет!

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

Как установить кнопку вывода "подсветки кода"?

Сразу хочу поблагодарить [urlspan]Максима Зайцева[/urlspan], у которого я позаимствовал исходники. Правда я их немного подправил под свои нужды. Что же нужно сделать, чтобы добавить кнопку?

Сначала скачайте эту папку, распакуем архив и положим ее в папку с нашей темой. Теперь откроем файл function.php и добавим туда  такой код:

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

Вы можете изменить цветовую гамму и все что угодно, для этого в папке CODE, которую мы закинули на сервер, нужно в файле code_plugin.js отредактировать 16 строку. Я добавил туда атрибут word-wrap: break-word; для переноса строк при обилии букв.

Как избавиться от Crayon Syntax Highlighter?

Первый вопрос решен, как же исправить уже имеющийся код в статьях? Это делается за 3 секунды при помощи команды MYSQL:

Если у вас другой префикс в таблицах, а не wp_posts (если такой, то изменить ОБЯЗАТЕЛЬНО! на произвольный в целях безопасности), то замените на свое название. Начнем с того, что посмотрим, какой код генерировал у меня плагин Crayon Syntax Highlighter? Вот он:

Откроем PHPMYADMIN, выберем нужную нам базу данных и зайдем во вкладку SQL:

Crayon Syntax HighlighterТеперь дадим команду, в моем случае такую:

Секунда и 37 строк заменено! Теперь можно отключать плагин Crayon Syntax Highlighter за ненадобностью. Этого монстра мы победили, остался второй.

Как избавиться от Special Text Boxes?

Этот плагин метит свою территорию не кодом pre, а шоркодами,  в моем случае это [stextbox id="black"] в начале и [/stextbox] в конце. Так как у меня этим плагином выводились терминальные команды, то цвет предыдущего кода мне полностью подходит. Сначала даем такую команду в SQL:

Так мы заменили начальный шоркод, но нам нужно заменить и второй, а поэтому дадим еще одну команду:

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


СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

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

4. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

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



Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


4 комментария
  1. В конечном счете немного все изменил. Решил выводит все тоже самое, только через стандартный тег code. Для этого добавил просто в style.css такой стиль:

    code {
    background-color: #444444 !important;
    border: 10px solid #444444 !important;
    border-radius: 5px !important;
    color: #e8e8e8 !important;
    word-wrap: break-word!important;
    }

  2. Нет, тег code не подходит, так как в нем нет переноса строк, очень жаль, вернулся к pre, но стиль все же сохранил в style.css

  3. Решил так же оформить красиво тег blockquote (цитата), который есть по умолчанию в wordpress.

    blockquote {
    background-color: #e8e8e8 !important;
    border: 10px solid #e8e8e8 !important;
    border-radius: 5px !important;
    color: #333333 !important;
    word-wrap: break-word!important;
    }

  4. Поставил плагин TinyMCE Pre Button, который добавляет кнопку тега pre в визуальный редактор.

Написать комментарий

Опубликовано © Блокнот вебмастера