Как вывести HTML, PHP, CSS код в статье без плагина | Заметки вебмастера






Выводим код в статье без плагина

вывести код в статьеДобрый день, уважаемые читатели моего блога!

Очень рад, что Вы снова посетили мой интернет-проект

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

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

Зачем нужно использовать код в своих статьях

Очень часто при написании материала подобного рода возникает необходимость продемонстрировать своим читателям какой-нибудь важный html- или css- код.

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

Кроме того, код коду рознь. И не исключено, что он после вставки в тело статьи начнет конфликтовать с шаблоном вашего блога.

Код для вставки html- и css- кодов

Итак, вы наверно не раз замечали на других Интернет — ресурсах подобные коды, присутствующие в статьях. Большинство из них вставлены в тело статьи при помощи плагинов. Один из таких плагинов — Wp-Syntax.

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

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

<pre style="overflow: height: 5px; width: 590px; padding: 2px; 
border: 1px solid #ccc;"></pre>

Как вы можете заметить он небольшой.

Остановлюсь подробнее на самом коде и его составляющих:

 

<pre style></pre> — этот элемент определяет стиль для блока предварительного форматирования;

 

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

 

heightпредварительная высота рамки кода в пикселях (так как включено свойство overflow);

 

width — ширина рамки кода в пикселях;

 

padding отступ от края рамки до самого кода в пикселях;

 

border — толщина рамки в пикселях;

 

solid — стиль рамки (в моём случае сплошная линия);

 

#ccc — цвет рамки (в моём случае серый);

 

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

Как работать с этим кодом

При написании своей статьи нажмите вкладку «Текст» в визуальном редакторе. Тем самым вы перейдете в html режим:

код в статье

Вставьте код для отображения рамки в нужное место и вернитесь назад, нажав на вкладку «Визуально».

В редакторе появится рамка. Теперь копируете свой код через проводник и вставляйте его во внутреннюю часть этой рамки:

Вставка кода в статью

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

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

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

Так что копируйте себе этот специальный код и используйте для вывода html- и css- кодов в своих статьях.

Вот в принципе и все. Надеюсь, был полезен. До встречи в моих новых статьях. Пока.

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 55

  1. Denis:

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

    Ответить

    • Сергей:

      Денис, хотелось бы посмотреть на твой готовый скрипт http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  2. Геннадий Ольховский:

    Сергей, мои поздравления с началом забега в блогомарафоне! Вижу по работам в вашем блоге, Вы хорошо разбираетесь сайтостроении. Вот про этот код я пока не слышал, да и не было времени задумываться. Сейчас обновил свой шаблон и многие коды не идут. В старом шаблоне был код как по мне, намного проще, а вот сейчас много получается заморочек. Даже не могу вывести h1 в заголовок статьи. Где-то все теряется, не пойму в чем дело.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif

    Ответить

    • Сергей:

      Геннадий, тоже поздравляю Вас со стартом http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Попробуйте с помощью моего кода вывести эти коды

      Ответить

  3. Denis:

    посмотреть на него можно в гугле — это скрипт google-code-prettify, только его нужно еще напильником доработать чтоб нормально отображал код.

    Ответить

    • Сергей:

      Спасибо за информацию, Денис http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      Ответить

  4. Denis:

    Спасибо за полезную информацию! А я это делаю при помощи плагина. Но этот способ возьму на вооружение.

    Ответить

    • Сергей:

      Этот способ будет получше плагина http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

    • Евгения Куварина:

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

      Ответить

  5. Евгения Куварина:

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

    Ответить

    • Сергей:

      Полностью согласен с Вами, Евгения http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif Главное не сдаваться http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  6. Евгения Куварина:

    уже опробовала код, у меня все работает, еще раз благодарю!

    Ответить

    • Сергей:

      Всегда пожалуйста, Евгения! http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif Рад был помочь http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

  7. Евгений:

    А я вывожу код плагином SyntaxHighlighter Evolved. Тоже неплохо получается!http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

    • Сергей:

      Евгений, я такого мнения, что не стоит прибегать к использованию плагинов, ради такого пустяка как вывод кода.
      Хотя, хозяин-барин, как говорится http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  8. Елена Контиевская:

    Спасибо тебе, Сережа-выручил! Теперь я удалю плагин для WP для вывода кода и лучше использую твой способ, так как он намного удобнее. Я давно искала замену своему плагину и вот увидела твой пост. Теперь он поможет моим обучающим постам очень здорово.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

    • Сергей:

      Очень рад, что помог Вам http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  9. Руслан:

    Сергей, приветствую! Хорошее простое решение, только выделять текст просто цветом из админки WordPress не рекомендую, потому что этот способ убирает тег code и добавляет левый span со стилем font-color — а это разрушает семантику страницы. Для раскраски исходного кода можно использовать различные jQuery библиотечки — подключаются они без плагинов и блог совершенно не нагружают и HTML не разваливают. Рекомендую!

    Ответить

    • Сергей:

      Добрый день, Руслан http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif
      При выделении текста из админки у меня не добавляется левый тег span.
      Получается вполне логичная конструкция. Например : span style = «color: #3366ff;»текст/span
      Про jQuery библиотеку слышал, но не применял. Нужно попробовать. http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

      • Denis:

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

        Ответить

  10. Денис Скрипник:

    Прикольно. Надо будет на своём блоге со стилями попробовать прописать.
    Благодарю.

    Ответить

  11. Аня:

    Благодарю и это мне так нужно было!!!
    Я на вордпрессе совсем недавно сайты начала строить, по этому только познаю его и приятно удивлена, что на него такое огромнейшее количество различных плагинов можно найти. Еще бы нагрузку на сайт они не делали ;)

    Ответить

    • Сергей:

      Да, плагинов для WP хватает http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif

      Ответить

      • Аня:

        Интересно сколько их вообщем))) Чего только не придумали разработчики.

        Ответить

  12. Геннадий Ольховский:

    Я для таких дел использую плагин, он вставляет и коты и тексты и много еще чего, просто пока не было надобности все проверять. Но твое Сергей решение, тоже очень интересное, сделал закладку и при случае испробую. Спасибо.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gifhttp://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

    Ответить

  13. Константин Белан:

    И правда работает! Спасибо, Сергей. У меня сейчас стоит плагин для подсветки HTML, PHP, CSS. У меня тут возникли некоторые идеи по этому поводу, поэтому постараюсь немного «докрутить» данный код :-)

    Ответить

    • Сергей:

      Всегда пожалуйста, Константин!
      Интересно будет посмотреть конечный результат допиленного кода http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Покажешь потом? http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

    • Denis:

      Вот и уменя идея возникла совместить этот способ со скриптом, и запилить кнопку в редактор для удобства.

      Ответить

      • Сергей:

        Всё-таки значит не зря я статью написал про этот код. Поначалу мучали сомнения: Писать- не писать?…
        Но разум победил. Ведь если мне он помогает, значит и другим может пригодиться. Вот и результат http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

        Ответить

  14. Юлия:

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

    Ответить

    • Сергей:

      На самом деле, Юлия, всё не так уж и сложно, если разобраться http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif
      А за наклонную штриховку отвечает элемент — background.
      Он располагается в файле style.php http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Если хотите избавиться от штриховки, то удалите этот стиль или путь до изображения. У меня на блоге наклонная штриховка выводится с помощью такого стиля:
      body {
      background: url(images/backgroundblue.png);
      }

      Ответить

  15. Юлия:

    Все получилось! Оказалось очень просто. Хотя, это целый подвиг для меня! Спасибо.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

    • Сергей:

      Всегда пожалуйста. Рад был помочь http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  16. Юлия:

    Сергей! Если Вам не сложно, подскажите мне еще, пожалуйста, как прописать отступы в тексте на моей странице 404, которую я переделала благодаря вашему же посту по этой теме.

    Ответить

    • Сергей:

      Прикольная у Вас картинка на странице 404. Ашипка на ашипке))))
      А как вы хотите вывести текст? Расположить его по центру страницы или с определённым отступом от левого края страницы? http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  17. Юлия:

    Просто задать отступ слева и справа, как во всех статьях. Насколько я разобралась добвить в css нужно:
    p{
    margin-bottom: 10px;
    }
    или как-то по-другому?

    Ответить

    • Сергей:

      Юлия, только не bottom. Потому что по английски это низ, а вам нужно с левой стороны, значит left.
      Попробуйте воспользоваться вот таким стилем:

      div style="margin-left: 20px;"...../div

      Только не забудьте скобки поставить в тегах div. Включите его в основной код страницы ошибки 404 http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

    • Denis:

      Юлия, у вас отступы как бы уже есть. вы просто текст не туда вставили

      Ответить

  18. Denis:

    Ищите блок div id = » content » и в нутрь его все прописывайте. И зачем два раза блок ctnter? Он вообще как бы не валиден, и в цсс3 уже давно неиспользуется.

    Ответить

  19. Юлия:

    Спасибо! http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif
    Получилось. Такие мелочи тоже важны. Потом еще попробую со шрифтами поэкспериментировать.. http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif

    Ответить

    • Сергей:

      Кто помог Денис или я? http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  20. Юлия:

    Сережа и Вы помогли, и Денис. Спасибо всем!
    Хотя, может что-то не так у меня… И сделала «через голову». http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif нашла один лишний.

    Ответить

  21. Denis:

    ПО своему сделала. Зря для абзадца Р сделали отступ слева, этот отступ будет везде где будет тег Р.

    Ответить

  22. Denis:

    Ой Сергей а чего это у вас подвал в лево уехал?

    Ответить

    • Сергей:

      Денис, немного подредактировал сайдбар, похимичил над дизайном http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif
      Нечайно влепил лишний тег div.
      Сейчас всё пучком, исправил http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

      • Alexandr:

        Есть редакторы которые подсвечивают ошибки кода. В них ошибка быстрее найдётся.

        Ответить

        • Сергей Саранчин:

          Да,я в курсе, Александр, есть такие

          Ответить

          • Alexandr:

            Какой Ваш любимый редактор Notepad++ или другой?

            Ответить

          • Сергей Саранчин:

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

            Ответить

          • Игорь:

            Да по моему на данный момент, редактор Notepad++ самый лучший

            Ответить

  23. Alexandr:

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

    Ответить

  24. Наталья:

    Спасибо! Оказывается так просто вставлять код в статью! А я для этого устанавливала плагин syntaxhighlighter. C Вашей помощью нашла такое простое решение и убрала лишний плагин!

    Ответить

    • Сергей Саранчин:

      Пожалуйста, Наталья. Рад был помочь :smile:

      Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: