Подсветка кода в вордпресс

подсветка кода

 

 

 

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

Так:

<div class=»art-layout-cell art-content»>

, или вот так:

<div class="art-layout-cell art-content">

Второе по моему мнению красивее. Теперь давайте рассмотрим как же это сделать?

Да пока не забыл. Был на сайте одноклассники и прочитал там вот это:

Ржала до слёз! Забился унитаз. Вода стоит. Засовываю трос в унитаз и начинаю им вращать. Идёт хреново, но постепенно влез весь. Тяну назад, вытаскиваю носок… Ёпта, понятно, какой-то дебил носок в унитаз смыл, отсюда и засор. И тут звонок в дверь. На пороге сырой мужик в халате. «Вы мой носок украли!» Чё, бля?!.. Оказывается, чувак мылся под душем, а тут в трубах чё-то шуршит. Вдруг видит — крышка унитаза поднимается, дядька в стену весь вжался. Из толчка появляется какая-то херь в говне и волосах, начинает вращаться, цепляет с полотенцесушителя носок и исчезает обратно в пучине… Хорошо, грит, что 5 минут назад с очка слез..

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

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

2014-02-01 01 54 36Как обычно скачивайте, устанавливайте и активируйте. Теперь вставляете код в статью визуально, выделяете его и нажимаете на кнопку. У Вас появляется окошко.

2014-02-01 02 01 30В этом окне выбираете код который вам надо вставить, если хотите прописываете строку и нажимаете кнопочку Insert. И теперь у Вас, красивый HTML код в статьи блога.  

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

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

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

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

замена2Здесь все просто. Вставляете код, выбираете язык программирования и нажимаете Добавить. И вот результат.

<?php
/**
*
* 404.php
*
* The template for displaying 404 pages (Not Found).
* Used when WordPress cannot find a post or page that matches the query.
*
* To change the error message:
* 1. Open functions.php file
* 2. Find the theme_404_content() function
* 3. Change the error_message variable value
*
* Additional settings are available under the Appearance -> Theme Options -> Pages.
*
*/
get_header(); ?>
<?php get_sidebar('top'); ?>
<?php theme_404_content(); ?>
<?php get_sidebar('bottom'); ?>
<?php get_footer(); ?>

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

Автор блога Андрей Косолапов.

 Комментируйте, делитесь с друзьями и подписывайтесь на новые статьи.

 Подпишись и не пропусти нового и интересного. 

 Увидел  в  аптеке  презервативы  в  одной  упаковке 12 штук  и 1 гигиеническая  салфетка  в  подарок. Я не  удержался  и  спросил  у  продавца, а  зачем  салфетка  в  подарок? Ответ  убил: «Пот  со  лба  вытереть!» )))))) 

Подписка на новые статьи здесь. Просто нажми. 

11940_1000

29 комментариев: Подсветка кода в вордпресс

  • Anna говорит:

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

    • andrey говорит:

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

  • Галина говорит:

    Андрюша, привет. Объясни, плиз, для чего код подсвечивать нужно?

    Про унитаз ржала до колик, чуть кофе не захлебнулась.

    • andrey говорит:

      Галя, привет! Конечно для простоты раз и для того чтоб не слился с текстом два. Да и скопировать его удобней.Смотри, тут есть функция, скопировать код. 

      А прикол с унитазом классный, сам ржал пол часа.

  • Галина говорит:

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

    • andrey говорит:

      Галь, так у тебя в твоих рецептах, кода нет. Так что живи спокойно. Этот плагин, тебе явно не нужен.

  • Андрей, насколько я знаю, плагин Crayon Syntax Highlighter считается одним из самых громоских и тяжелых в WordPress.

    Проверь это дело, а то твой блог и так не самый быстрый на свете, а с этим плагином….

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

    • andrey говорит:

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

        • andrey говорит:

          Сергей, приветствую! А что за плагин, тот который легкий? Может и себе поменять 

  • Иван говорит:

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

  • Софья говорит:

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

    • andrey говорит:

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

  • Рита говорит:

    Андрей, привет! Пользуюсь вторым, потому как первый не хотел работать. Мучилась я с ним, то ли версия WordPress ему не нравилась, то ли еще что то.  А насчет подсветки, тоже была. А потом я ее ликвидировала. Опять таки умный дядя на блоге написал, что то типа не нужны эти плагины, потому что  валидность кода с ошибками получается. Я оставила все по минимуму. Теперь ничего лишнего. И письма с хостинга вроде не пишут. Пришлось пересмотреть свое отношение к плагинам.  Ну а дальше поживем увидим. А вообще то штука красивая. Спасибо.

    • andrey говорит:

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

  • Юрий говорит:

    Добрый день!

    Ищу плагин для подсветки синтаксиса в WordPress

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

    WP Editor работает глючно и отказывается разбирать php теги на странице сообщения (в редактировании тем и плагинов разбирает нормально ).

    Можно работать во внешнем редакторе и копировать код в WordPress, но это неудобно.

    Других вариантов я не нашел.

    Можете ли подсказать плагин, подсвечивающий синтаксис php в текстовом редакторе WordPress-а?

    • andrey говорит:

      Юрий, здравствуйте! Мощно использовать плагин WP-Syntax , но тогда Вам придется теги прописывать в ручную.

      Пример вот :<pre lang="LANGUAGE" line="1"> код </pre>, где LANGUAGE это обозначение языка программирования, а line="1"

      Вот как то так.

  • Игорь говорит:

    Андрюх привет.Попробую протестировать плагин Crayon Syntax Highlighter

    Над анекдотом долго смеялся, угарный

  • Вячаслав говорит:

    Меня на оборот именно Crayon выручил. Стояла весь не обычная задача с которой Crayon справился великолепно ))) 

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

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

Поиск по блогу
People group
Рубрики блога
Курсы Евгения Попова

Контекстная реклама, за сатошики при чем платит реально

Подписная страничка за 5 минут

Подписка на обновления

Подписка на новые статьи здесь. Просто нажми. 

11940_1000
Группы Субскрайба

Хочу Всё Знать. Полезные Советы

Мой Ютуб
fir2