ГлавнаяПлагины для wordpress › Как красиво вывести HTML, PHP код в статье блога?


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


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

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

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

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

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

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

Итак:

 

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

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

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

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

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

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

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

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

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

 

Как красиво вывести HTML код

 

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

 

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

<div><img class="expando" src="/ИМЯ ВАШЕГО РИСУНКА.jpg" alt="" 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>

 

Вот, пример:

 

<div class="container"> <div id="sidebar"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Разделы</a></li> <li><a href="#">Регистрация</a></li> <li><a href="#">Выход</a></li> </ul> </div> <div class="main-content"></div> </div>

 

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

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




29 комментариевА что думаете Вы?

  1. Елена

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Натали

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

    [Ответить]

    Денис Черников ответил:

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

    Спасибо, за подписку!

    [Ответить]

  3. Василий

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

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

    Попробовал вставлять при помощи WP-Syntax, там работает.

    Методом тыка в SyntaxHighlighter Evolved попробовал третий код, в коде язык заменил на html и вставил код, все получилось нормально. Денис, я правильно действую или нужно делать по другому?

    [Ответить]

    Денис Черников ответил:

    Странно, у меня всё выведено именно так, как я описал.

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

    Да, делаете правильно, сам все варианты перетыкал, сейчас работает.

    [Ответить]

  4. Валентина

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

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Валентина ответил:

    да я и не нулевая в хтмл, но почему-то по предложенному варианту не получилось. Пришлось искать другое решение.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Любовь

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Любовь ответил:

    Денис, у меня большая сложность. :(

    Пожалуйста, помогите.

    Коротко суть.

    Собираюсь проводить конкурс на сайте. И мне нужно, чтобы участники конкурса скопировали код и разместили на своих сайтах. В результате, у них отображается таблица с условиями конкурса, как у Вас здесь sozdaiblog.ru/konkurs/den...l-bloggerom.html

    Теперь проблема.

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

    И вопрос.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Любовь ответил:

    Денис, в описании буду опираться на Вашу страницу, ссылка выше в комменте.

    У вас там условие конкурса: вставить код и ниже приведен сам код, его можно скопировать. Под кодом есть картинка «смотреться код будет следующим образом».

    Так вот.

    У меня код не отображается. Вместо него то, как он будет выглядеть.

    Я на время открою страницу, Вы посмотрите. Может я чего не понимаю.

    http: //academy-female.ru/konkursy-v-academii/konkurs-serdechnyiy-pazl-o-lyubvi/

    [Ответить]

    Денис Черников ответил:

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

  6. Любовь

    Денис, простите.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Любовь ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Любовь ответил:

    А я таки нашла решение!!!

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

    [Ответить]

    Денис Черников ответил:

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

    Любовь ответил:

    Спасибо, Денис :) (смущенно улыбаюсь)

    Тег почему-то не отобразился, может кому пригодится — xmp

    [Ответить]

    валентин ответил:

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

    [Ответить]

    Любовь ответил:

    Валентин, перед Вашим кодом ставите тег <xmp, после кода — закрывающий /xmp. У меня это сработало, надеюсь и Вам поможет. Удачи :)

    [Ответить]

  7. валентин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Marta

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх