Здравствуйте, друзья и читатели блога – 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>
Вот, пример:
Выглядит это конечно менее красиво, но зато, данный вариант не напрягает наш движок и не уменьшает скорость загрузки блога.
Надеюсь, каждый сможет для себя выбрать удобный ему вариант красивой вставки кода в статьи блога.
Ну а мне, остаётся только предложить Вам, подписаться на новые статьи и попросить задавать вопросы в комментариях.
С уважением, Денис Черников!
-
Как установить Яндекс поиск по сайту на WordPress?
-
Как провести SEO-оптимизацию контента на WordPress
- Ранжирование что это простыми словами
-
PBN сеть - супер метод захвата позиций в SEO
-
Сравнительный анализ Agile и Waterfall методологий разработки проектов на платформе WordPress
- Мотивация это простыми
- Обзор последнего релиза WordPress 6.4
- Аутсорсинг это простыми словами
- Сегмент это простыми словами
- Лояльный это простыми словами
Честно говоря, я ничего не поняла. Используются термины, понятные специалистам, через это все остальное не имеет смысла. Например, когда говорят4 «Вставьте файл в корневой каталог сайта». А что это «корневой каталог»? Можно влезть не туда, не зная.
Елена, где Вы здесь, в этой статье, увидели хоть один термин, которым пользуются специалисты?
Извините, если насчет ревизий постов — все понятно, и спасибо большое!, но эта вещь мне тоже непонятна: в чем красота, как это увидеть? А также как это сделать? Из описания мне тоже неясно. Побоялась экспериментировать.Поэтому подписалась на Ващу рассылку: узнать о об этом хорошо, и о других интересных вещах тоже!Спасибо!
Посмотрите, как в моих статьях выводятся коды и попробуйте вставить в одну из своих статей, любой код без этого плагина. Думаю, Вы сразу всё поймёте!Спасибо, за подписку!
Без плагина вывести не получается. В итоге есть рамка, а под ней расположен код. В рамку никак не хочет вставляться.
С этим плагином тоже были проблемы. Когда вставлял код в php, вставленный код получался отличным от оригинального. Появлялись стрелки впереди и сзади.Попробовал вставлять при помощи WP-Syntax, там работает.
Методом тыка в SyntaxHighlighter Evolved попробовал третий код, в коде язык заменил на html и вставил код, все получилось нормально. Денис, я правильно действую или нужно делать по другому?
Странно, у меня всё выведено именно так, как я описал.
На счёт стрелок, это да, у меня тоже были с этим проблемы. Это сам движок его пытается добавить лишние элементы или удалить нужные. Помоему, это из-за визуального редактора так происходит, а не из-за плагина.
Да, делаете правильно, сам все варианты перетыкал, сейчас работает.
Без плагина html-код, предложенный в статье вашего блога, увы…не помог.Решила проблему вставки html-кода в текст статьи только с помощью плагина Auto SyntaxHighlighter.
А почему не помог? Выводит не красиво или что?
да я и не нулевая в хтмл, но почему-то по предложенному варианту не получилось. Пришлось искать другое решение.Но все равно, спасибо за статью. Вы мне дали материал, что проблема вставки хтмл-кода решаема на блоге wordpress/
Пожалуйста, Валентина! Я тоже многого не знаю, но учиться никогда не поздно. Удачи, заходите.
Спасибо, Денис, большое за вставку кода без плагина. Как раз то, что нужно! Так как вставить код в посте нужно раз в полугодие
Пожалуйста, Любовь! Приходите в гости ещё!
Денис, у меня большая сложность.
Пожалуйста, помогите.
Коротко суть.
Собираюсь проводить конкурс на сайте. И мне нужно, чтобы участники конкурса скопировали код и разместили на своих сайтах. В результате, у них отображается таблица с условиями конкурса, как у Вас здесь sozdaiblog.ru/konkurs/den…l-bloggerom.html
Теперь проблема.
Если я использую Ваше решение вставки кода без плагина, то в блоке вместо самого кода отображается конечный результат. Т.е. то, что зашифровано кодом (или как это назвать )
И вопрос.
Денис, что мне нужно сделать, чтобы в блоке отображался именно код?
Любовь, немного не понял суть Вашей проблемы! Если Вы сделали так как описано в статье, то всё должно работать, как и там. Если я не понял, поясните подробнее.
Денис, в описании буду опираться на Вашу страницу, ссылка выше в комменте.
У вас там условие конкурса: вставить код и ниже приведен сам код, его можно скопировать. Под кодом есть картинка «смотреться код будет следующим образом».
Так вот.
У меня код не отображается. Вместо него то, как он будет выглядеть.
Я на время открою страницу, Вы посмотрите. Может я чего не понимаю.
http: //academy-female.ru/konkursy-v-academii/konkurs-serdechnyiy-pazl-o-lyubvi/
Именно этот код Вы таким способом не покажете, если только скобки у него раздвинете <>!
Денис, простите.Не поняла — какие скобки и как раздвинуть? Или каким другим образом его показать?
Скобки вокруг всех тегов «div» «a» и т. д. Другим способом через плагин, как у меня.
Спасибо, Денис. Пошла ставить плагин
Не за что. Я ни чего не сделал.
А я таки нашла решение!!!Нужно использовать тег в начале, и закрывающий соответственно в конце Тогда код не преобразовывается
Умничка, Любовь! Если сами справляетесь, это уже показатель!
Спасибо, Денис (смущенно улыбаюсь)Тег почему-то не отобразился, может кому пригодится — xmp
любовь покажите понагляднее как вы это сделали, что за тег, который в нвчале и в конце?
Валентин, перед Вашим кодом ставите тег