Бизнес блог Александра Быкадорова

Как выделить код на блоге! Обзор плагинов WP-Syntax и Syntaxhighlighter

Выделение кода в вордпресс

Как выделить код в блоге? Такой вопрос  я себе задавал совсем недавно.

Точнее, когда писал статью на блог, а именно эту: «Запрет на индексацию внешних ссылок».

И там, в посте, мне надо было привести пример кода HTML, который необходимо вставить в нужном месте на блоге.
Казалось бы — проще простого. Записал код, выделил его как-нибудь, к примеру жирным или выделением и все готово. Но нет, это не солидно.

Всем привет, друзья.

Обзор плагинов WP-Syntax и Syntaxhighlighter

Ну сравните два разных написания одного и того же кода.

Пример 1. «Колхозный» ))

<noindex><a href=»ССЫЛКА» rel=»nofollow» target=»_blank»>ОПИСАНИЕ_ССЫЛКИ</a></noindex>

Вы так же пишите коды на своем блоге? Я Вас умоляю — читайте до конца и немедленно приступайте к исправлению, а я проверю ))) Шутка.

Пример 2. «Экспертный»

<noindex><a href="ССЫЛКА" rel="nofollow" target="_blank">ОПИСАНИЕ_ССЫЛКИ</a></noindex>

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

<div id=»footer» class=»clearfix»>

<?php if ( ! $graphene_settings[‘hide_copyright’] ) : ?>

<div id=»copyright»>

<h3><?php _e(‘Copyright’, ‘graphene’); ?></h3>

<?php if ( $graphene_settings[‘copy_text’] == » && ! $graphene_settings[‘show_cc’] ) : ?>

<p>

<?php printf( ‘&copy; %1$s %2$s.’, date( ‘Y’ ), get_bloginfo( ‘name’ ) ); ?>

</p>

<?php elseif ( ! $graphene_settings[‘show_cc’] ) : ?>

<?php

if ( ! stristr( $graphene_settings[‘copy_text’], ‘</p>’ ) ) { $graphene_settings[‘copy_text’] = wpautop( $graphene_settings[‘copy_text’] ); }

echo $graphene_settings[‘copy_text’];

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

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

Я — не исключение. И поэтому, я постоянно сталкиваюсь с тем, что постоянно что то улучшаю, дополняю и упрощаю.

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

«Обзор — анализ — инструкции», в которой уже на данный момент 65 статей, по разным техническим моментам, связанных в основном с работой, наладкой и другой информацией касаемо темы  блоговодства.

И вот тут, знания о том, как выделить код в тексте — весьма кстати.

Во общем, думаю смысл Вы поняли. Если хотите, быть полезными для своего читателя + информация, которую Вы выкладываете, была красиво «упакова» — данная статья Вам будет полезна.
Итак, что необходимо сделать, что настроить и установить для правильной работы в будущем, чтобы можно было выделять код HTML в тексте?

По сути очень не много.

Скачать вот эти два плагина WP-Syntax и расширение к нему WP-Syntax Button

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

Итак, скачали и установили плагины? А активировать не забыли?

Для тех, кто не знает или еще страшнее забыл ))), как это делается — вот Вам моя статья в помощь.

«Как установить плагин на блог в WordPress ?» — как раз статья об этом.

После того, как Вы активировали плагины, давайте приступим и опробуем их в действии.

Итак, пишем новый пост. Берем код HTML,  который нам необходимо вставить в текст, выделяем его и жмем на кнопку, как на рисунке:
WP-Syntax

После этого у Вас появится следующее окно:

настройка WP-Syntax
В двух окошках, которые появляются, необходимо указать следующее:

Select Lаnguage — в нем Вы указываете язык Вашего кода

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

Указали код строки и все. Ясно, что этот код необходимо вставить с 5 — й стоки (к примеру).
Кстати, такая нумерация идет «»Автоматом» в текстовом редакторе NotePad ++. Удобная программулина, кстати.

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

Итак, после того, как Вы проделаете данные манипуляции, Вы сможете заметить, что код принял совершенно другой вид, как на фото ниже:

работа плагина WP-Syntax

Все хорошо, друзья.

Но есть одно Но ! И это но, очень здорово мешает жизни простому и начинающему блогеру.
О чем это я? Друзья, дело в том, что после того, как я установил данный плагин и расширение для него, я выделил одну строку кода, разместил его в статью. Все сработало и я по сути забыл о нем.
Каково же было мое удивление, когда я попытался сделать тоже самое, но для нескольких строк…

Ничего не произошло ! Плагин не сработал.
Каков же выход? Он есть. Сейчас я расскажу.

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

вставка кода WP-Syntax

и уже там, заключить вставляемый код в следующие операторы:

<pre lang="LANGUAGE" line="1"> здесь ваш код </pre>

И о чудо — все заработало !!!

Победа

Лично я расцениваю данную проблему в несовместимости установленной у меня версии WordPress, а именно 3.5.2 и данного плагина.

Проверил я и другой путь. Скачал подобный плагин Syntaxhighlighter, установил, активировал…
Кнопка в консоли редактирования даже не изъявила желания появится.
Что — ж не судьба.

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

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

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

Фуууххх… Пора бы и расслабиться. Старый КВН — прикольный. Галустян жжет.

Понравился блог?
Получайте статьи на ПОЧТУ!

О авторе Смотреть все статьи Сайт автора

Александр Быкадоров

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

Комментариев: 6Оставить комментарий

Социальные комментарии Cackle
  • Спасибо, Александр. Раньше не придавала этому значения. Придется пересмотреть. За веселое видио отдельное мерси :)
    Успехов!

    Ответ
    • Пожалуйста, Натала и доброго времени суток. Мой блог — к Вашим услугам. Да — видео прикольное )))

      Ответ
  • Во, мне как раз подобную штуковину нужно себе поискать, но еще чтобы подсветка была… Ну, чтобы код красиво смотрелся :)

    Ответ
    • Дык, можно и этим воспользоваться )))

      Ответ
    • Виктор, доброго дня. Пожалуйста! Заходите в гости, оставляйте комментарии — получайте призы.

      Ответ

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

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