Вывести html код на странице, показать, отобразить как текст Добрый день, начинающие вебмастера. Вы пишете о создании и продвижении блогов? На определенном этапе развития своего проекта вы обязательно захотите поделиться с читателями какими-то полезными сведениями. К примеру, выложите на страницу html код или скрипт (пусть даже и чужой).
Как вывести программный код Кстати, делиться с читателями своим положительным или даже отрицательным опытом – это основа успешного ведения блога (и хорошие темы для статей).
Проблемы-то возникают у многих, поэтому подобная информация востребована.
Итак, вы хотите дать читателям скопировать скрипт или html код, размещаете его в тело поста. Не тут-то было. Как вывести его без преобразования?
Совсем недавно для корректного вывода тегов на странице предлагалось вручную заменять знаки < и >на спецсимволы < и >.
Сегодня движок WordPress чаще всего умеет сам делать такие преобразования, но также добавляет много мусора, перековеркивает, обрезает код, делает его нечитаемым или некопируемым (было в моей теме).
Поначалу мои читатели видели коды в браузере, а скопировать не могли.
На самом деле способов красиво оформить html код, вставить его в пост с подсветкой синтаксиса несколько: без плагина и с применением wordpress плагинов для кода.
Перечислю способы, а вы пробуйте, что подойдет именно вам. Я убедилась на своем опыте, что не в каждом шаблоне теги и плагины работают одинаково. Подробнее о правильном выведении кода смотрите в учебнике HTML.
Показать html код на странице как текст. Тег
Показать html код на странице как текст, подсветить его помогают теги .
В ВИЗУАЛЬНОМ РЕДАКТОРЕ пропишите код.
Перейдите в HTML РЕЖИМ, добавьте открывающий и закрывающий тег . В моей теме уже автоматически знаки < >преобразовались в спецсимволы < и >.
СОХРАНИТЕ. В визуальный режим больше НЕ переключайтесь, иначе изменения пропадут.
При отображении СОХРАНЯЮТСЯ все пробелы. В моем шаблоне получился следующий результат (у вас отображение может быть другим).
Как вывести html код на странице поста как текст. Тег
Тег также позволяет вывести одну или несколько строк программного кода. Пробелы и переносы НЕ УЧИТЫВАЮТСЯ, переносите строки тегами
или
Делайте все аналогично вставке тега .
Отобразить html код на странице как текст. Тег
Если вы предлагаете читателям коды нечасто, можете использовать такую конструкцию.
Она помогает отобразить коды или скрипты в виде текста, заключенного в рамочку, С УЧЕТОМ форматирования и всех переносов.
Отображение кода получится в симпатичной рамочке. Ее ширину редактируйте, изменяя параметр width, высоту — height.
Но дело в том, что КОДЫ с использованием тега считаются НЕВАЛИДНЫМИ.
Учебник HTML предлагает вставлять этот тег только в таком виде.
Плагины для выведения кода на страницу поста Большинство блогеров для красивого и неизменного отображения html кодов на странице поста применяют плагины для WordPress. Опять таки, плагинов множество, но у меня корректно заработал лишь один.
Приведу список, а вы подберете плагин, работающий с вашим шаблоном.
Сладкая парочка WP-Syntax – выделяет код рамочкой, дает возможность подсветить синтаксис. Плюс wp-syntax button – выводит кнопку в админпанель блога, предоставляет возможность вставить html код или скрипт без преобразования в специальное окно.
Недостаток – все действия производятся в html режиме, переключаться в визуальный режим нельзя, иначе все изменения исчезнут.
Syntax Highlighter Compress – в текстовый редактор выводит дополнительную кнопку. Нажимаете ее, открывается окно, куда можно ввести код и выбрать язык программирования.
Так же работают и другие плагины.
Better WordPress Syntax Wp-highlight.js SyntaxHighlighter Auto SyntaxHighlighter (у меня). И многие другие плагины. Мне пришлось устанавливать и активировать все по-очереди, пока не нашла тот, который работает в моем шаблоне.
Заключение Итак, из статьи вы узнали, как можно вывести html код на странице поста, используя теги или плагины. Теперь читатели его увидят в браузере.
А какой способ применяете вы, чтобы внести теги html в обычный текст без преобразования?
Источник
Как вывести символы и теги html на странице сайта Браузеры интерпретируют html-теги в свой синтаксис. В итоге любой html-тег при написании его в виде не отображается на странице, так как мы видим его в коде. Рассмотрим все способы как можно выводить теги html на странице сайта так, как они написаны в коде.
Существует три способа. Каждый из них не идеален. Я пользуюсь первым.
Замена левой и правой скобки на коды
Чем характеризуется любой html-тег? Наличием открывающей и закрывающий скобки: < и >. Если мы будем писать эти скобки с помощью html-кодов, то добьемся как раз нужного нам результата, а точнее, что браузер поймет этот код, как простой текст.
Например, мы хотим вывести следующий html-код на странице сайта:
html> head> style> .primer1 < padding : 10px; margin : 10px; width : 200px; height : 100px; box-shadow : 0px 0px 15px 5px #a34b23; > /style> /head> body> div class css">primer1">Пример №1. Рамка с тенью /div> /body> /html> <html > <head > <style > .primer1 < padding : 10px; margin : 10px; width : 200px; height : 100px; box-shadow : 0px 0px 15px 5px #a34b23; > </style > </head > <body > <div class css">primer1">Пример №1. Рамка с тенью </div > </body > </html > Заменять каждую знак муторно и долго. Поэтому проще всего определиться сразу какой код нужно вывести, а потом массово сделать замену. Это делается с помощью любого блокнота (например, notepad++). Открыв код в блокноте, нажмите комбинацию «CTRL + H» (заменить). Заполните поля что заменить и чем. Таким образом, можно автоматом массово заменить все нужные символы на другие.
В интернете есть специальные онлайн генераторы для замены.
В целом я придерживаюсь этого метода, т.к. он кроссбраузерный и валидный (отвечает всем стандартам).
Используя теги и
В html есть специальные теги для отображения кода как есть:
<![CDATA[.]]> и
<![CDATA[.</plaintext> . Весь html-код нужно поместить как есть между открывающим и закрывающим тегами и все.</p> <p>В целом этот метод работает во всех браузерах. Однако этот код не проходит валидацию.</p> <p>Пользоваться этим методом или нет? Конечно, вряд ли это может как-то сказаться на позициях сайта и траста сайта со стороны поисковых систем, но лично я придерживаюсь к мнению, что если делать код, то сразу отвечающим всем стандартам. Сейчас это не важно, а завтра может быть это станет уже критично.</p> <pre><blockquote>xmp</font>> html</font>> head</font>> style</font>> .<font >primer1</font>< <font >padding</font>: <font >10px;</font> <font >margin</font>: <font >10px;</font> <font >width</font>: <font >200px;</font> <font >height</font>: <font >100px;</font> <font >box-shadow</font>: <font >0px 0px 15px 5px</font> <font >#a34b23;</font> > /style</font>> /head</font>> body</font>> div</font> <font >class</font> css">primer1</font>"><font >Пример №1. Рамка с тенью</font>/div</font>> /body</font>> /html</font>> /xmp</font>></blockquote></pre> <pre><blockquote>plaintext</font>> html</font>> head</font>> style</font>> .<font >primer1</font>< <font >padding</font>: <font >10px;</font> <font >margin</font>: <font >10px;</font> <font >width</font>: <font >200px;</font> <font >height</font>: <font >100px;</font> <font >box-shadow</font>: <font >0px 0px 15px 5px</font> <font >#a34b23;</font> > /style</font>> /head</font>> body</font>> div</font> <font >class</font> css">primer1</font>"><font >Пример №1. Рамка с тенью</font>/div</font>> /body</font>> /html</font>> /plaintext</font>></blockquote></pre> <p>Из этих двух тегов, советую выбирать , т.к. он более новый и есть шансы пройти валидность кода.</p> <p><a href="https://zarabotat-na-sajte.ru/uroki-html/kak-vyvesti-simvoly-html-na-stranice.html">Источник</a></p> <h2 id="publikatsiya-html-koda-na-stranitse-sayta">Публикация html-кода на странице сайта (продолжение)</h2> <p>Вот, наконец, мы и подошли к более серьёзному варианту показа кода. Он позиционируется как демонстрация html-кода с подсветкой синтаксиса и осуществляется с помощью плагина SyntaxHighlighter . Такой вариант можно увидеть на большинстве сайтов обучающей тематики.</p> <h4 id="demo-primer-syntaxhihglighter-3-0-83">Демо-пример SyntaxHihglighter 3.0.83</h4> <p>Это тестовый код для демонстрации работы плагина:</p> <p>Почему я выбрал для установки именно версию 3.0.83? На мой взгляд, это самая удачная версия плагина линейки SyntaxHighlighter. Если Вы протестируете более свежие версии и сравните с этой, непременно заметите преимущества последней. Итак, приступим к скачиванию плагина.</p> <p>Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.</p> <h3 id="ustanovka-plagina">Установка плагина</h3> <p>Установка очень проста. Следуйте простым подсказкам:</p> <ul> <li>Распакуйте скачанный архив в текущую папку на компьютере.</li> <li>Закачайте всё содержимое папки js (папку syntaxhighlighter ) в соответствующую папку ( js ), которая находится в корневой папке сайта.</li> <li>Откройте тестовый файл по адресу <br/>//www.вашдомен.ru/js/syntaxhighlighter/test.html <br/>и проверьте работу плагина. Если всё работает корректно, тестовый файл test.html , а так же текстовой файл LGPLv3.txt можно удалить, но только с сервера сайта. На компьютере файл test.html нам ещё пригодится.</li> <li>Открываем файл test.html на компьютере, копируем и расставляем все коды по своим местам на странице своего сайта:</li> </ul> <p>В раздел head , как видим, просятся множество скриптов, но, если мы будем публиковать только код HTML, PHP, CSS и JavaScript, нам понадобятся только лишь эти скрипты:</p> <p>Там же, в разделе head , подключаем стили и скрипт для файла имеющего отношение к копированию в буфер обмена — clipboard.swf :</p> <pre> <script type="text/javascript">SyntaxHighlighter.config.clipboardSwf = '/js/syntaxhighlighter/scripts/clipboard.swf'; SyntaxHighlighter.all();</script> </pre> <p>Чтобы демонстрировать html-код на своём сайте необходимо на странице предполагаемой демонстрации в разделе body разместить такой код:</p> <pre> <pre >Здесь будет публикуемый код</pre> <p>Brush — это кисть на английском, а вместо словосочетания «название кисти» нужно будет подставлять названия в зависимости от языка публикуемого кода, например:</p> <ul> <li>html — для обычного html-кода;</li> <li>php — для php-кода.</li> <li>c-sharp — для кода в файле стилей;</li> <li>js — для ява скриптов;</li> </ul> <p>Например, разместим код с кистью c-sharp . Исходный код выглядит так:</p> <h4 id="nedostatki-syntaxhihglighter-3-0-83">Недостатки SyntaxHihglighter 3.0.83</h4> <p>Казалось бы, на этом этапе всё прекрасно, всё работает, но данный плагин, к сожалению, не лишен недостатков. Если вставлять html-код в первозданном виде, ничего не заменяя мнемониками, некоторые из тегов, почему-то не отражаются. Чтобы было понятнее, попробуем выставить для показа такой код:</p> <pre> <html> <head> <style type="text/css"></style> </head> <body><h2 id="nazvanie">Название</h2> <p>Параграф</p> </body> </html> </pre> <p>Просто вставили код, ничего не изменяя. Смотрите, что получилось? Где DOCTYPE , где открывающие и закрывающие теги html и head ? «Канули в лету!»</p> <pre> <style type="text/css"></style> <h2 id="nazvanie-2">Название</h2> <p>Параграф</p> </pre> <p>Самый простой способ решения этой проблемы — замена некоторых символов мнемониками. Делать это можно вручную, если код небольшой или с помощью «Notepad2» или «Notepad++». Если Вы используете «Notepad++» и в нем производите замену, лучше выставить синтаксис «Batch» и в настройках включить подсветку атрибутов тега, тогда будут высвечиваться символы меньше ( < ) и больше ( >) и их удобнее заменять мнемониками < и > . После замены символов меньше ( < ) и больше ( >) весь код будет отображаться корректно. Я для перестраховки все символы заменяю мнемониками, потому, что есть ещё один «косячок» плагина — при отсутствии закрывающих тегов в публикуемом коде, он, пытаясь исправить ситуацию, подставляет их. В результате, человек может скопировать у вас некорректный код.</p> <h4 id="totalnaya-zamena-nekotoryh-simvolov-mnemonikami">Тотальная замена некоторых символов мнемониками</h4> <p>Как Вы уже поняли, замена символов в объёмном коде не есть «айс». Для облегчения этой задачи будем использовать любой «Notepad». Принцип действия примерно одинаков, поэтому кратко распишу процедуру замены в «Notepad++», которым успешно пользуюсь.</p> <p>Будьте внимательны при тотальной замене всех символов в документе. Может случиться казус! Например, если в документе «php» менять «id» на «class» — умный редактор, помимо всех плановых замен сделает Вам из w id th — w class th, из w id gets — w class gets. Получается так, что он не разбираясь, меняет «всех на всех» и, независимо где находятся буквы «id», он поменяет их на «class»!</p> <h4 id="nastroyki-plagina">Настройки плагина</h4> <p>Если Вы хотите убрать нумерацию строк, воспользуйтесь опцией gutter , указав ее значение перед вызовом плагина:</p> <pre> <script type="text/javascript">SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.all();</script> </pre> <p>Также можно подключить другую тему оформления кода вместо Default . Откройте папку syntaxhighlighter/styles и выберите один из вариантов. Скопируйте его название (переименовать → копировать) и вставьте в строку вместо дефолтного shThemeDefault.css :</p> <p>Вот и всё о публикации кода и «коварном» плагине SyntaxHighlighter 3.0.83 . Выбирайте приемлемый для себя способ и применяйте на своём сайте. Всего доброго! Ваш L.M.</p> <p><a href="https://dynamic-site.olerant.ru/26-website_creation/publikaziyakoda2.php">Источник</a></p> <div class="fpm_end"></div><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://business-programming.ru/java-soapfaultexception-soap-ws-xml-javax/" target="_blank" rel="dofollow" class="u38ad81e2ea2b753df81f91636e268848"><!-- INLINE RELATED POSTS 1/3 //--><style> .u38ad81e2ea2b753df81f91636e268848 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u38ad81e2ea2b753df81f91636e268848:active, .u38ad81e2ea2b753df81f91636e268848:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u38ad81e2ea2b753df81f91636e268848 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u38ad81e2ea2b753df81f91636e268848 .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .u38ad81e2ea2b753df81f91636e268848 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u38ad81e2ea2b753df81f91636e268848:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Читайте также:</span> <span class="postTitle">Java soapfaultexception soap ws xml javax</span></div></a></div> </div><!-- .entry-content --> </article> <div class="rating-box"> <div class="rating-box__header">Оцените статью</div> <div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="260333" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div> </div> <div class="entry-social"> <div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--facebook" data-social="facebook"></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span></div> </div> <meta itemprop="author" content="admin"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://business-programming.ru/nazvanie-2/" content="Название"> <meta itemprop="dateModified" content="2023-08-29"> <meta itemprop="datePublished" content="2023-09-01T09:31:49+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="Программирование"><meta itemprop="telephone" content="Программирование"><meta itemprop="address" content="https://business-programming.ru"></div> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="block-2" class="widget widget_block"><div class="flatPM_sidebar" data-top="70"> <div id="Q_sidebar"></div> </div></div> </div> </aside><!-- #secondary --> <div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/yaschiki-s-usami-python/">Ящики с усами python</a></div><div class="post-card__description">pandas.plotting.boxplot# Make a box-and-whisker plot</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-74/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-73/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">HTML Размеры таблицы HTML таблицы могут иметь разные</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-72/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> </div></div> </div><!--.site-content-inner--> </div><!--.site-content--> <div class="site-footer-container "> <div class="footer-navigation fixed" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner full"> <div class="menu-tehnicheskoe-menyu-container"><ul id="footer_menu" class="menu"><li id="menu-item-12637" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12637"><a href="https://business-programming.ru/pravoobladatelyam/">Правообладателям</a></li> <li id="menu-item-12638" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12638"><a href="https://business-programming.ru/politika-konfidentsialnosti/">Политика конфиденциальности</a></li> <li id="menu-item-12639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12639"><a href="https://business-programming.ru/kontakty/">Контакты</a></li> </ul></div> </div> </div><!--footer-navigation--> <footer id="colophon" class="site-footer site-footer--style-gray full"> <div class="site-footer-inner fixed"> <div class="footer-bottom"> <div class="footer-info"> © 2024 Программирование </div> <div class="footer-counters"><!-- Yandex.Metrika counter --> <script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(97921369, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script> <noscript><div><img src="https://mc.yandex.ru/watch/97921369" style="position:absolute; left:-9999px;" alt=""/></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </div> </footer><!--.site-footer--> </div> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><script type="text/javascript" id="reboot-scripts-js-extra">
/* <![CDATA[ */
var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"};
var wps_ajax = {"url":"https:\/\/business-programming.ru\/wp-admin\/admin-ajax.php","nonce":"ea4cb145f7"};
/* ]]]]><![CDATA[> */
</script> <script type="text/javascript" src="https://business-programming.ru/wp-content/themes/reboot/assets/js/scripts.min.js" id="reboot-scripts-js"></script> <script>window.lazyLoadOptions = [{
elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
data_src: "lazy-src",
data_srcset: "lazy-srcset",
data_sizes: "lazy-sizes",
class_loading: "lazyloading",
class_loaded: "lazyloaded",
threshold: 300,
callback_loaded: function(element) {
if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
if (element.classList.contains("lazyloaded") ) {
if (typeof window.jQuery != "undefined") {
if (jQuery.fn.fitVids) {
jQuery(element).parent().fitVids();
}
}
}
}
}},{
elements_selector: ".rocket-lazyload",
data_src: "lazy-src",
data_srcset: "lazy-srcset",
data_sizes: "lazy-sizes",
class_loading: "lazyloading",
class_loaded: "lazyloaded",
threshold: 300,
}];
window.addEventListener('LazyLoad::Initialized', function (e) {
var lazyLoadInstance = e.detail.instance;
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var image_count = 0;
var iframe_count = 0;
var rocketlazy_count = 0;
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
continue;
}
if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
continue;
}
images = mutation.addedNodes[i].getElementsByTagName('img');
is_image = mutation.addedNodes[i].tagName == "IMG";
iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');
image_count += images.length;
iframe_count += iframes.length;
rocketlazy_count += rocket_lazy.length;
if(is_image){
image_count += 1;
}
if(is_iframe){
iframe_count += 1;
}
}
} );
if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
lazyLoadInstance.update();
}
} );
var b = document.getElementsByTagName("body")[0];
var config = { childList: true, subtree: true };
observer.observe(b, config);
}
}, false);</script><script data-no-minify="1" async src="https://business-programming.ru/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt){var t='<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">',a='<button class="play" aria-label="play Youtube video"></button>';t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script> </body> </html>]]></plaintext></div></div> 
