Sozdaiblog.ru
Назад

Как красиво вывести HTML, PHP код в статье блога?

Опубликовано: 23.05.2012
Время на чтение: 6 мин
29
496

Как вывести HTMLЗдравствуйте,  друзья и читатели блога – Sozdaiblog.ru!

В данной статье Вы узнаете, как красиво вывести HTML, PHP  код в статье блога.

Каждому из нас, при написании различного рода материала на своём блоге, иногда требуется показать своим читателям  тот, или иной код в формате HTML или PHP.

Если данные коды просто вставить в статью, то это будет смотреться, по крайней мере, не красиво или даже ужасно.

Представьте себе, в середине страницы книги куча крокозябр. Читать такую книгу, я бы не стал.

У данной проблемы есть несколько решений, которые мы сейчас разберём.

Итак:

 

Как красиво вывести HTML,PHP коды в статье блога.

Для того, чтобы красиво вывести HTML код в статье блога, нам потребуется плагин — SyntaxHighlighter Evolved.

По-другому, он называется – «Подсветка синтаксиса».

Скачать его можно тут.

Затем, его нужно установить и активировать. Как это сделать, можно узнать, прочитав мою статью — "Как установить плагин WordPress».

У этого WordPress плагина, есть ряд настроек. Для редактирования этих настроек, Вам нужно зайти в админку WordPress => Настройки и из выпадающего списка выбрать => Подсветка синтаксиса.

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

Каких-то особенных настроек у него нет, и любой новичок разберётся без труда.

Единственное, на что можно обратить внимание – это то, что в самом низу настроек отображаются параметры вставки кода:

 

 

Говоря простым языком, Вы должны выбрать один из параметров, во время написания статьи переключиться в режим HTML-Редактор, вставить один из примеров, а внутрь поместить нужный для вывода код. Это не сложно, вот пример:

 

<script type="text/javascript" src="/imagesize.js"></script>

<div><img class="expando" src="/ИМЯ ВАШЕГО РИСУНКА.jpg" alt="Как красиво вывести HTML, PHP код в статье блога?" width="150" height="110" border="0" /></div>

 

Есть ещё один вариант вставки кода в блог без плагина.

 

Вставить HTML,PHP код в блог без плагина.

Чтобы вставить код в блог без плагина нужно в режиме HTML-редакторе поместить его внутрь вот такого кода:

 


<div style="overflow: auto; height: 80px; width: 450px; padding: 8px; border: 1px solid #ccc;">
<xmp>

ВСТАВИТЬ СЮДА ВАШ КОД
</xmp>
</div>

 

Вот, пример:

 


 

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

Надеюсь, каждый сможет для себя выбрать удобный ему вариант красивой вставки кода в статьи блога.

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

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Елена
    Опубликовано: 10.08.2012 Ответить на сообщение

    Честно говоря, я ничего не поняла. Используются термины, понятные специалистам, через это все остальное не имеет смысла. Например, когда говорят4 «Вставьте файл в корневой каталог сайта». А что это «корневой каталог»? Можно влезть не туда, не зная.

    • Денис Черников
      Опубликовано: 10.08.2012 Ответить на сообщение

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

  • Натали
    Опубликовано: 12.08.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 12.08.2012 Ответить на сообщение

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

  • Василий
    Опубликовано: 04.11.2012 Ответить на сообщение

    Без плагина вывести не получается. В итоге есть рамка, а под ней расположен код. В рамку никак не хочет вставляться.
    С этим плагином тоже были проблемы. Когда вставлял код в php, вставленный код получался отличным от оригинального. Появлялись стрелки впереди и сзади.
    Попробовал вставлять при помощи WP-Syntax, там работает.
    Методом тыка в SyntaxHighlighter Evolved попробовал третий код, в коде язык заменил на html и вставил код, все получилось нормально. Денис, я правильно действую или нужно делать по другому?

    • Денис Черников
      Опубликовано: 04.11.2012 Ответить на сообщение

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

  • Валентина
    Опубликовано: 06.12.2012 Ответить на сообщение

    Без плагина html-код, предложенный в статье вашего блога, увы...не помог.
    Решила проблему вставки html-кода в текст статьи только с помощью плагина Auto SyntaxHighlighter.

    • Денис Черников
      Опубликовано: 06.12.2012 Ответить на сообщение

      А почему не помог? Выводит не красиво или что?

      • Валентина
        Опубликовано: 23.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 23.01.2013 Ответить на сообщение

          Пожалуйста, Валентина! Я тоже многого не знаю, но учиться никогда не поздно. Удачи, заходите.

  • Любовь
    Опубликовано: 22.01.2013 Ответить на сообщение

    Спасибо, Денис, большое за вставку кода без плагина. Как раз то, что нужно! Так как вставить код в посте нужно раз в полугодие

    • Денис Черников
      Опубликовано: 22.01.2013 Ответить на сообщение

      Пожалуйста, Любовь! Приходите в гости ещё!

      • Любовь
        Опубликовано: 28.01.2013 Ответить на сообщение

        Денис, у меня большая сложность.
        Пожалуйста, помогите.
        Коротко суть.
        Собираюсь проводить конкурс на сайте. И мне нужно, чтобы участники конкурса скопировали код и разместили на своих сайтах. В результате, у них отображается таблица с условиями конкурса, как у Вас здесь sozdaiblog.ru/konkurs/den...l-bloggerom.html
        Теперь проблема.
        Если я использую Ваше решение вставки кода без плагина, то в блоке вместо самого кода отображается конечный результат. Т.е. то, что зашифровано кодом (или как это назвать )
        И вопрос.
        Денис, что мне нужно сделать, чтобы в блоке отображался именно код?

        • Денис Черников
          Опубликовано: 28.01.2013 Ответить на сообщение

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

          • Любовь
            Опубликовано: 28.01.2013 Ответить на сообщение

            Денис, в описании буду опираться на Вашу страницу, ссылка выше в комменте.
            У вас там условие конкурса: вставить код и ниже приведен сам код, его можно скопировать. Под кодом есть картинка «смотреться код будет следующим образом».
            Так вот.
            У меня код не отображается. Вместо него то, как он будет выглядеть.
            Я на время открою страницу, Вы посмотрите. Может я чего не понимаю.
            http: //academy-female.ru/konkursy-v-academii/konkurs-serdechnyiy-pazl-o-lyubvi/

          • Денис Черников
            Опубликовано: 28.01.2013 Ответить на сообщение

            Именно этот код Вы таким способом не покажете, если только скобки у него раздвинете <>!

  • Любовь
    Опубликовано: 28.01.2013 Ответить на сообщение

    Денис, простите.
    Не поняла — какие скобки и как раздвинуть? Или каким другим образом его показать?

    • Денис Черников
      Опубликовано: 28.01.2013 Ответить на сообщение

      Скобки вокруг всех тегов «div» «a» и т. д. Другим способом через плагин, как у меня.

      • Любовь
        Опубликовано: 28.01.2013 Ответить на сообщение

        Спасибо, Денис. Пошла ставить плагин

        • Денис Черников
          Опубликовано: 28.01.2013 Ответить на сообщение

          Не за что. Я ни чего не сделал.

          • Любовь
            Опубликовано: 29.01.2013 Ответить на сообщение

            А я таки нашла решение!!!
            Нужно использовать тег в начале, и закрывающий соответственно в конце Тогда код не преобразовывается

          • Денис Черников
            Опубликовано: 29.01.2013 Ответить на сообщение

            Умничка, Любовь! Если сами справляетесь, это уже показатель!

          • Любовь
            Опубликовано: 29.01.2013 Ответить на сообщение

            Спасибо, Денис (смущенно улыбаюсь)
            Тег почему-то не отобразился, может кому пригодится — xmp

          • валентин
            Опубликовано: 24.03.2013 Ответить на сообщение

            любовь покажите понагляднее как вы это сделали, что за тег, который в нвчале и в конце?

          • Любовь
            Опубликовано: 24.03.2013 Ответить на сообщение

            Валентин, перед Вашим кодом ставите тег

  • валентин
    Опубликовано: 24.03.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.03.2013 Ответить на сообщение

      А Вы пробелы в тэгах ставьте, чтобы код не запускался.

  • Marta
    Опубликовано: 27.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.01.2014 Ответить на сообщение

      Пожалуйста, Марта! Если что пишите!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.