Как создать простой markdown-редактор с предварительным просмотром в реальном времени

Историческая справка

Происхождение и развитие Markdown

Markdown был создан в 2004 году Джоном Грубером в сотрудничестве с Аароном Шварцем. Изначально язык разметки задумывался как способ упростить написание форматированного текста без необходимости использования HTML. Основной целью было обеспечить читабельность исходного текста, при этом позволяя легко преобразовать его в структурированный HTML. Благодаря своей лаконичности и интуитивной структуре, Markdown быстро стал популярен среди разработчиков, блогеров и технических писателей. Применение Markdown распространилось на множество платформ — от GitHub до различных систем управления контентом.

Появление редакторов с превью

Руководство по созданию простого редактора markdown с предварительным просмотром в реальном времени - иллюстрация

С ростом популярности Markdown возникла потребность в инструментах, которые не только позволяли бы писать в этом формате, но и предоставляли бы возможность визуального контроля над результатом. Так появились редакторы с поддержкой реального времени — они стали особенно востребованными среди пользователей, предпочитающих видеть финальный результат без необходимости вручную компилировать HTML. Именно на этом фоне вопрос «как сделать markdown редактор» стал актуальным для начинающих разработчиков.

Базовые принципы

Архитектура приложения

Создание markdown редактора с предварительным просмотром требует понимания двух основных компонентов: текстового редактора и движка визуализации. Первый компонент — это элемент пользовательского интерфейса, куда вводится текст в формате Markdown. Второй — модуль, преобразующий текст в HTML и отображающий его в виде результата. Связь между этими частями реализуется посредством событий, реагирующих на ввод текста. Основной принцип — немедленный рендеринг: каждое изменение в редакторе должно мгновенно отражаться в области предпросмотра.

Выбор технологии и библиотек

Наиболее популярным подходом при реализации markdown редактора своими руками является использование JavaScript и браузерных API. Для конвертации Markdown в HTML применяются библиотеки вроде marked.js, markdown-it или showdown. Они обеспечивают высокую скорость трансформации и легко интегрируются в клиентские приложения. Использование React, Vue или Svelte позволяет построить реактивную архитектуру, где состояние текста синхронизируется с результатом визуализации. Однако для простого редактора достаточно Vanilla JS и минимального CSS.

Примеры реализации

Классическая реализация на JavaScript

Для демонстрации базовой реализации markdown редактора с предварительным просмотром в реальном времени можно использовать следующий подход. В HTML создаются два блока: для ввода Markdown и </p> <div> для вывода HTML. JavaScript слушает событие ввода текста и вызывает функцию преобразования, используя библиотеку вроде marked. Обновление DOM происходит по мере набора текста. Такой подход обеспечивает мгновенную обратную связь и прост в реализации. Это идеальный старт для тех, кто интересуется созданием markdown редактора с нуля.</p> <h3>Расширения и улучшения</h3> <p>После освоения базового варианта можно добавлять функции: подсветку синтаксиса, поддержку расширений Markdown (например, таблиц или списков задач), экспорт в PDF и автосохранение. Также важно учитывать безопасность: необходимо очищать HTML от потенциально вредоносного кода, используя библиотеки типа DOMPurify. Таким образом, реализация markdown редактора может быть как учебным проектом, так и полноценным инструментом для использования в продакшене.</p> <h2>Частые заблуждения</h2> <h3>Markdown — это просто HTML с другим синтаксисом</h3> <p>Одна из распространенных ошибок — считать, что Markdown является всего лишь альтернативной формой записи HTML. На самом деле, Markdown — это язык разметки с упрощенной структурой и явными ограничениями. Он не обладает полной выразительной мощностью HTML и не предназначен для создания сложных интерфейсов. Понимание его ограничений важно при планировании функциональности редактора.</p>  <div class="srtb-tag-2069261722"></div>  <h3>Реализация markdown редактора требует сложных фреймворков</h3> <p>Новички часто предполагают, что создание markdown редактора возможно только с использованием громоздких фреймворков. На практике для реализации простого функционала достаточно базового знания JavaScript и одной библиотеки для парсинга Markdown. Более того, минимализм — это преимущество: отсутствие избыточных зависимостей упрощает отладку, повышает производительность и облегчает поддержку кода.</p> <h3>Предварительный просмотр всегда синхронизируется идеально</h3> <p>Еще одно заблуждение — полагать, что область предпросмотра автоматически отображает точную версию итогового документа. На деле, качественная синхронизация требует продуманной логики: отскроллированный текст, активные элементы и интерактивные компоненты должны отображаться корректно. Это особенно критично при работе с длинными документами. Поэтому при проектировании важно учесть не только рендеринг, но и UX-сценарии взаимодействия.</p> <h2>Заключение</h2> <p>Создание markdown редактора — это не только техническое упражнение, но и способ глубже понять взаимодействие между пользовательским вводом, парсингом и отображением. Даже простая реализация markdown редактора своими руками позволяет освоить ключевые принципы реактивного программирования, обработки событий и безопасности веб-приложений. Более того, подобный проект может служить отправной точкой для построения более сложных систем: блог-платформ, CMS или интегрированных средств разработки контента. Важно делать акцент на простоте, расширяемости и удобстве использования — ведь именно эти качества определяют востребованность инструмента на практике.</p> <p><script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://bitrix-blog.ru/%d0%ba%d0%b0%d0%ba-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%be%d0%b9-markdown-%d1%80%d0%b5%d0%b4%d0%b0%d0%ba%d1%82%d0%be%d1%80-%d1%81-%d0%bf%d1%80%d0%b5%d0%b4%d0%b2/" }, "headline": "Как создать простой markdown-редактор с предварительным просмотром в реальном времени", "description": "Пошаговое руководство по разработке простого редактора Markdown с функцией мгновенного предпросмотра. Разбор ключевых компонентов и примеры реализации.", "datePublished": "2025-09-21T07:25:25+00:00", "dateModified": "2025-09-21T07:25:26+00:00", "author": { "@type": "Person", "name": "admin" }, "publisher": { "@type": "Organization", "name": "Код и Кофе", "logo": { "@type": "ImageObject", "url": "https://bitrix-blog.ru/wp-content/uploads/2025/08/cropped-logo.png" } }, "genre": "Fullstack-разработка", "keywords": "Руководство по созданию простого редактора markdown с предварительным просмотром в реальном времени", "url": "https://bitrix-blog.ru/%d0%ba%d0%b0%d0%ba-%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d1%82%d1%8c-%d0%bf%d1%80%d0%be%d1%81%d1%82%d0%be%d0%b9-markdown-%d1%80%d0%b5%d0%b4%d0%b0%d0%ba%d1%82%d0%be%d1%80-%d1%81-%d0%bf%d1%80%d0%b5%d0%b4%d0%b2/", "articleBody": "Историческая справка Происхождение и развитие Markdown Markdown был создан в 2004 году Джоном Грубером в сотрудничестве с Аароном Шварцем. Изначально язык разметки задумывался как способ упростить написание форматированного текста без необходимости использования HTML. Основной целью было обеспечить читабельность исходного текста, при этом позволяя легко преобразовать его в структурированный HTML. Благодаря своей лаконичности и интуитивной структуре, Markdown быстро стал популярен среди разработчиков, блогеров и технических писателей. Применение Markdown распространилось на множество платформ — от GitHub до различных систем управления контентом. Появление редакторов с превью С ростом популярности Markdown возникла потребность в инструментах, которые не только позволяли бы писать в этом формате, но и предоставляли бы возможность визуального контроля над результатом. Так появились редакторы с поддержкой реального времени — они стали особенно востребованными среди пользователей, предпочитающих видеть финальный результат без необходимости вручную компилировать HTML. Именно на этом фоне вопрос «как сделать markdown редактор» стал актуальным для начинающих разработчиков. Базовые принципы Архитектура приложения Создание markdown редактора с предварительным просмотром требует понимания двух основных компонентов: текстового редактора и движка визуализации. Первый компонент — это элемент пользовательского интерфейса, куда вводится текст в формате Markdown. Второй — модуль, преобразующий текст в HTML и отображающий его в виде результата. Связь между этими частями реализуется посредством событий, реагирующих на ввод текста. Основной принцип — немедленный рендеринг: каждое изменение в редакторе должно мгновенно отражаться в области предпросмотра. Выбор технологии и библиотек Наиболее популярным подходом при реализации markdown редактора своими руками является использование JavaScript и браузерных API. Для конвертации Markdown в HTML применяются библиотеки вроде marked.js, markdown-it или showdown. Они обеспечивают высокую скорость трансформации и легко интегрируются в клиентские приложения. Использование React, Vue или Svelte позволяет построить реактивную архитектуру, где состояние текста синхронизируется с результатом визуализации. Однако для простого редактора достаточно Vanilla JS и минимального CSS. Примеры реализации Классическая реализация на JavaScript Для демонстрации базовой реализации markdown редактора с предварительным просмотром в реальном времени можно использовать следующий подход. В HTML создаются два блока: для ввода Markdown и для вывода HTML. JavaScript слушает событие ввода текста и вызывает функцию преобразования, используя библиотеку вроде marked. Обновление DOM происходит по мере набора текста. Такой подход обеспечивает мгновенную обратную связь и прост в реализации. Это идеальный старт для тех, кто интересуется созданием markdown редактора с нуля. Расширения и улучшения После освоения базового варианта можно добавлять функции: подсветку синтаксиса, поддержку расширений Markdown (например, таблиц или списков задач), экспорт в PDF и автосохранение. Также важно учитывать безопасность: необходимо очищать HTML от потенциально вредоносного кода, используя библиотеки типа DOMPurify. Таким образом, реализация markdown редактора может быть как учебным проектом, так и полноценным инструментом для использования в продакшене. Частые заблуждения Markdown — это просто HTML с другим синтаксисом Одна из распространенных ошибок — считать, что Markdown является всего лишь альтернативной формой записи HTML. На самом деле, Markdown — это язык разметки с упрощенной структурой и явными ограничениями. Он не обладает полной выразительной мощностью HTML и не предназначен для создания сложных интерфейсов. Понимание его ограничений важно при планировании функциональности редактора. Реализация markdown редактора требует сложных фреймворков Новички часто предполагают, что создание markdown редактора возможно только с использованием громоздких фреймворков. На практике для реализации простого функционала достаточно базового знания JavaScript и одной библиотеки для парсинга Markdown. Более того, минимализм — это преимущество: отсутствие избыточных зависимостей упрощает отладку, повышает производительность и облегчает поддержку кода. Предварительный просмотр всегда синхронизируется идеально Еще одно заблуждение — полагать, что область предпросмотра автоматически отображает точную версию итогового документа. На деле, качественная синхронизация требует продуманной логики: отскроллированный текст, активные элементы и интерактивные компоненты должны отображаться корректно. Это особенно критично при работе с длинными документами. Поэтому при проектировании важно учесть не только рендеринг, но и UX-сценарии взаимодействия. Заключение Создание markdown редактора — это не только техническое упражнение, но и способ глубже понять взаимодействие между пользовательским вводом, парсингом и отображением. Даже простая реализация markdown редактора своими руками позволяет освоить ключевые принципы реактивного программирования, обработки событий и безопасности веб-приложений. Более того, подобный проект может служить отправной точкой для построения более сложных систем: блог-платформ, CMS или интегрированных средств разработки контента. Важно делать акцент на простоте, расширяемости и удобстве использования — ведь именно эти качества определяют востребованность инструмента на практике.", "image": { "@type": "ImageObject", "url": "https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-838.jpg", "width": 1024, "height": 1024 } }</script></p> <div class="post-views content-post post-2453 entry-meta load-static"> <span class="post-views-icon dashicons dashicons-chart-bar"></span> <span class="post-views-label">Post Views:</span> <span class="post-views-count">35</span> </div><div id='c3BUq_2664473827808'></div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Posts"> <div class="nav-links"><div class="nav-previous"><a title="Разница между деревом и графом в структурах данных простыми словами" href="https://bitrix-blog.ru/%d1%80%d0%b0%d0%b7%d0%bd%d0%b8%d1%86%d0%b0-%d0%bc%d0%b5%d0%b6%d0%b4%d1%83-%d0%b4%d0%b5%d1%80%d0%b5%d0%b2%d0%be%d0%bc-%d0%b8-%d0%b3%d1%80%d0%b0%d1%84%d0%be%d0%bc-%d0%b2-%d1%81%d1%82%d1%80%d1%83%d0%ba/" rel="prev"><span class="ast-post-nav" aria-hidden="true"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> Previous</span> <p> Разница между деревом и графом в структурах данных простыми словами </p></a></div><div class="nav-next"><a title="Yarn для управления зависимостями: как настроить и использовать в проекте правильно" href="https://bitrix-blog.ru/yarn-%d0%b4%d0%bb%d1%8f-%d1%83%d0%bf%d1%80%d0%b0%d0%b2%d0%bb%d0%b5%d0%bd%d0%b8%d1%8f-%d0%b7%d0%b0%d0%b2%d0%b8%d1%81%d0%b8%d0%bc%d0%be%d1%81%d1%82%d1%8f%d0%bc%d0%b8-%d0%ba%d0%b0%d0%ba-%d0%bd%d0%b0/" rel="next"><span class="ast-post-nav" aria-hidden="true">Next <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span> <p> Yarn для управления зависимостями: как настроить и использовать в проекте правильно </p></a></div></div> </nav><div class="ast-single-related-posts-container ast-container--"><div class="ast-related-posts-title-section"> <h2 class="ast-related-posts-title"> Последние статьи </h2> </div><div class="ast-related-posts-wrapper"> <article class="ast-related-post post-730 post type-post status-publish format-standard has-post-thumbnail hentry category-fullstack"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section post-has-thumb"><div class="post-thumb-img-content post-thumb"><a aria-label="Read more about Оптимизация сайта для повышения скорости загрузки и производительности страниц" href="https://bitrix-blog.ru/%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%be%d0%b2%d1%8b%d1%88%d0%b5%d0%bd%d0%b8%d1%8f-%d1%81%d0%ba%d0%be%d1%80/"><img width="1024" height="1024" src="https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-56.jpg" class="attachment-full size-full wp-post-image" alt="Как оптимизировать ваш сайт для повышения производительности и скорости" itemprop="" decoding="async" srcset="https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-56.jpg 1024w, https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-56-300x300.jpg 300w, https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-56-150x150.jpg 150w, https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-56-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" title="Оптимизация сайта для повышения скорости загрузки и производительности страниц"></a> </div></div> <header class="entry-header related-entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://bitrix-blog.ru/%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%be%d0%b2%d1%8b%d1%88%d0%b5%d0%bd%d0%b8%d1%8f-%d1%81%d0%ba%d0%be%d1%80/" target="_self" rel="bookmark noopener noreferrer">Оптимизация сайта для повышения скорости загрузки и производительности страниц</a> </h3> <div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://bitrix-blog.ru/category/fullstack/" rel="category tag">Fullstack-разработка</a></span> / <span class="posted-on"><span class="published" itemprop="datePublished"> 30.08.2025 </span></span></div> </header> <div class="entry-content clear"> </div> </div> </div> </article> <article class="ast-related-post post-800 post type-post status-publish format-standard has-post-thumbnail hentry category-fullstack"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section post-has-thumb"><div class="post-thumb-img-content post-thumb"><a aria-label="Read more about Инструменты разработчика в браузере для отладки кода: как правильно использовать" href="https://bitrix-blog.ru/%d0%b8%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%bc%d0%b5%d0%bd%d1%82%d1%8b-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d1%87%d0%b8%d0%ba%d0%b0-%d0%b2-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%b5/"><img width="1024" height="1024" src="https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-93.jpg" class="attachment-full size-full wp-post-image" alt="Как использовать инструменты разработчика в браузере для отладки" itemprop="" decoding="async" loading="lazy" srcset="https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-93.jpg 1024w, https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-93-300x300.jpg 300w, https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-93-150x150.jpg 150w, https://bitrix-blog.ru/wp-content/uploads/2025/08/out-0-93-768x768.jpg 768w" sizes="auto, (max-width: 1024px) 100vw, 1024px" title="Инструменты разработчика в браузере для отладки кода: как правильно использовать"></a> </div></div> <header class="entry-header related-entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://bitrix-blog.ru/%d0%b8%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%bc%d0%b5%d0%bd%d1%82%d1%8b-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d1%87%d0%b8%d0%ba%d0%b0-%d0%b2-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%b5/" target="_self" rel="bookmark noopener noreferrer">Инструменты разработчика в браузере для отладки кода: как правильно использовать</a> </h3> <div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://bitrix-blog.ru/category/fullstack/" rel="category tag">Fullstack-разработка</a></span> / <span class="posted-on"><span class="published" itemprop="datePublished"> 31.08.2025 </span></span></div> </header> <div class="entry-content clear"> </div> </div> </div> </article> </div> </div> </main> </div> <div class="widget-area secondary" id="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"> <div class="sidebar-main" > <aside id="block-2" class="widget widget_block widget_search"><form role="search" method="get" action="https://bitrix-blog.ru/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Поиск</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Поиск" class="wp-block-search__button wp-element-button" type="submit" >Поиск</button></div></form></aside><aside id="block-3" class="widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Свежие записи</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d1%83%d0%bf%d0%b0%d0%ba%d0%be%d0%b2%d0%ba%d0%b0-%d0%be%d0%b2%d0%be%d1%89%d0%b5%d0%b9-%d0%b8-%d1%84%d1%80%d1%83%d0%ba%d1%82%d0%be%d0%b2-%d1%81%d0%b5%d1%82%d0%ba%d0%be%d0%b9-%d1%80%d1%83%d0%ba%d0%b0/">Упаковка овощей и фруктов сеткой-рукав продлевает их свежесть</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%ba%d0%bb%d0%b5%d0%b9-kvick-mix-fx-600-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%bb%d0%b8%d1%82%d0%ba%d0%b8-%d0%b2%d1%8b%d1%81%d0%be%d0%ba%d0%be%d0%b5-%d0%ba%d0%b0%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%be/">Клей Kvick Mix FX 600 для плитки — высокое качество и доступная цена</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%bf%d1%80%d1%83%d0%b6%d0%b8%d0%bd%d1%8b-%d0%b7%d0%b0%d0%ba%d0%b0%d0%b7%d0%b0%d1%82%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%be%d0%b8%d0%b7%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8f-%d1%81-%d0%b4/">Пружины заказать от производителя с доставкой по всей России</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%b4%d0%b8%d1%81%d0%ba%d0%b8-next-%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%be%d0%b1%d0%b8%d0%bb%d0%b5%d0%b9-%d0%b2%d0%b0%d1%88-%d0%bd%d0%b0%d0%b4%d0%b5%d0%b6%d0%bd%d1%8b%d0%b9/">Диски Next для автомобилей — ваш надежный партнер на дороге</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%b1%d1%8b%d1%82%d0%be%d0%b2%d0%ba%d0%b8-%d0%b4%d0%bb%d1%8f-%d0%b4%d0%b0%d1%87%d0%b8-%d0%ba%d0%b0%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5-%d0%bc%d0%be%d0%b4%d1%83%d0%bb%d1%8c/">Бытовки для дачи: качественные модульные решения по доступной цене</a></li> </ul></div></aside><aside id="block-6" class="widget widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">Рубрики</h2><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-7"><a href="https://bitrix-blog.ru/category/backend/">Backend-разработка</a> </li> <li class="cat-item cat-item-10"><a href="https://bitrix-blog.ru/category/devops/">DevOps и развертывание</a> </li> <li class="cat-item cat-item-6"><a href="https://bitrix-blog.ru/category/frontend/">Frontend-разработка</a> </li> <li class="cat-item cat-item-12"><a href="https://bitrix-blog.ru/category/fullstack/">Fullstack-разработка</a> </li> <li class="cat-item cat-item-9"><a href="https://bitrix-blog.ru/category/databases/">Базы данных</a> </li> <li class="cat-item cat-item-8"><a href="https://bitrix-blog.ru/category/tools/">Инструменты и среда разработки</a> </li> <li class="cat-item cat-item-14"><a href="https://bitrix-blog.ru/category/career/">Карьера в IT</a> </li> <li class="cat-item cat-item-15"><a href="https://bitrix-blog.ru/category/news/">Новости и события</a> </li> <li class="cat-item cat-item-1"><a href="https://bitrix-blog.ru/category/main/">Общая</a> </li> <li class="cat-item cat-item-13"><a href="https://bitrix-blog.ru/category/tutorials/">Практикум и уроки</a> </li> <li class="cat-item cat-item-11"><a href="https://bitrix-blog.ru/category/web-trends/">Тренды и будущее веба</a> </li> </ul></div></aside><aside id="sape_rtb_widget-3" class="widget widget_sape_rtb_widget"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">  <div class="srtb-tag-2069261722"></div>  </div></aside><aside id="serpzilla_links-3" class="widget "><div id='SxB6_2664473827808'></div></aside> </div> </div> </div>  </div> <div class="sape-rtb-no-title-fullwidth sape-rtb-no-title-before-footer" style="width:100%;display:block;"> <div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">  <div class="srtb-tag-2069261722"></div>  </div> </div> <footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon"> <div class="site-primary-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-2-equal ast-builder-grid-row-tablet-2-equal ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-primary-footer-builder"> <div class="ast-builder-grid-row-container-inner"> <div class="ast-builder-footer-grid-columns site-primary-footer-inner-wrap ast-builder-grid-row"> <div class="site-footer-primary-section-1 site-footer-section site-footer-section-1"> <div class="footer-widget-area widget-area site-footer-focus-item" data-section="section-footer-menu"> <div class="footer-bar-navigation"><nav class="site-navigation ast-flex-grow-1 navigation-accessibility footer-navigation" id="footer-site-navigation" aria-label="Site Navigation: Menu" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope"><div class="footer-nav-wrap"><ul id="astra-footer-menu" class="ast-nav-menu ast-flex astra-footer-vertical-menu astra-footer-tablet-horizontal-menu astra-footer-mobile-vertical-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-282"><a aria-expanded="false" href="https://bitrix-blog.ru/" class="menu-link">Главная<span role="application" class="dropdown-menu-toggle ast-header-navigation-arrow" tabindex="0" aria-expanded="false" aria-label="Menu Toggle" aria-haspopup="true"></span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-602"><a aria-expanded="false" href="https://bitrix-blog.ru/category/backend/" class="menu-link">Backend-разработка<span role="application" class="dropdown-menu-toggle ast-header-navigation-arrow" tabindex="0" aria-expanded="false" aria-label="Menu Toggle" aria-haspopup="true"></span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-608"><a aria-expanded="false" href="https://bitrix-blog.ru/category/career/" class="menu-link">Карьера в IT<span role="application" class="dropdown-menu-toggle ast-header-navigation-arrow" tabindex="0" aria-expanded="false" aria-label="Menu Toggle" aria-haspopup="true"></span></a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-609"><a aria-expanded="false" href="https://bitrix-blog.ru/category/news/" class="menu-link">Новости и события<span role="application" class="dropdown-menu-toggle ast-header-navigation-arrow" tabindex="0" aria-expanded="false" aria-label="Menu Toggle" aria-haspopup="true"></span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-280"><a href="https://bitrix-blog.ru/blog/" class="menu-link">Блог</a></li> </ul></div></nav></div> </div> </div> <div class="site-footer-primary-section-2 site-footer-section site-footer-section-2"> <aside class="footer-widget-area widget-area site-footer-focus-item footer-widget-area-inner" data-section="sidebar-widgets-footer-widget-1" aria-label="Footer Widget 1" role="region" > <section id="block-8" class="widget widget_block widget_recent_entries"><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d1%83%d0%bf%d0%b0%d0%ba%d0%be%d0%b2%d0%ba%d0%b0-%d0%be%d0%b2%d0%be%d1%89%d0%b5%d0%b9-%d0%b8-%d1%84%d1%80%d1%83%d0%ba%d1%82%d0%be%d0%b2-%d1%81%d0%b5%d1%82%d0%ba%d0%be%d0%b9-%d1%80%d1%83%d0%ba%d0%b0/">Упаковка овощей и фруктов сеткой-рукав продлевает их свежесть</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%ba%d0%bb%d0%b5%d0%b9-kvick-mix-fx-600-%d0%b4%d0%bb%d1%8f-%d0%bf%d0%bb%d0%b8%d1%82%d0%ba%d0%b8-%d0%b2%d1%8b%d1%81%d0%be%d0%ba%d0%be%d0%b5-%d0%ba%d0%b0%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%be/">Клей Kvick Mix FX 600 для плитки — высокое качество и доступная цена</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%bf%d1%80%d1%83%d0%b6%d0%b8%d0%bd%d1%8b-%d0%b7%d0%b0%d0%ba%d0%b0%d0%b7%d0%b0%d1%82%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%be%d0%b8%d0%b7%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8f-%d1%81-%d0%b4/">Пружины заказать от производителя с доставкой по всей России</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%b4%d0%b8%d1%81%d0%ba%d0%b8-next-%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%be%d0%b1%d0%b8%d0%bb%d0%b5%d0%b9-%d0%b2%d0%b0%d1%88-%d0%bd%d0%b0%d0%b4%d0%b5%d0%b6%d0%bd%d1%8b%d0%b9/">Диски Next для автомобилей — ваш надежный партнер на дороге</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%b1%d1%8b%d1%82%d0%be%d0%b2%d0%ba%d0%b8-%d0%b4%d0%bb%d1%8f-%d0%b4%d0%b0%d1%87%d0%b8-%d0%ba%d0%b0%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b5-%d0%bc%d0%be%d0%b4%d1%83%d0%bb%d1%8c/">Бытовки для дачи: качественные модульные решения по доступной цене</a></li> </ul></section> </aside> </div> </div> </div> </div> <div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-2-equal ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder"> <div class="ast-builder-grid-row-container-inner"> <div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row"> <div class="site-footer-below-section-1 site-footer-section site-footer-section-1"> <div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder"> <div class="ast-footer-copyright"><p>© 2026 Код и Кофе</p> </div> </div> </div> <div class="site-footer-below-section-2 site-footer-section site-footer-section-2"> <div class="footer-widget-area widget-area site-footer-focus-item ast-footer-html-1" data-section="section-fb-html-1"> <div class="ast-header-html inner-link-style-"><div class="ast-builder-html-element"><p style="text-align: right"><span style="color: white"><a style="color: black" href="/karta-sajta/" target="_blank" rel="noopener">Карта сайта</a></span></p> </div></div> </div> <div class="footer-widget-area widget-area site-footer-focus-item ast-footer-html-2" data-section="section-fb-html-2"> <div class="ast-header-html inner-link-style-"><div class="ast-builder-html-element"><p><a href="/privacy/" target="_blank" rel="noopener"><span style="color: black">Политика конфиденциальности</a></p> </div></div> </div> </div> </div> </div> </div> </footer> </div> <div id='SxB6_2664473827808'></div><script type="text/javascript">  </script><script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both"> <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve"> <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" /> </svg></span> <span class="screen-reader-text">Scroll to Top</span> </div> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script id="astra-theme-js-js-extra"> var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""}; //# sourceURL=astra-theme-js-js-extra </script> <script src="https://bitrix-blog.ru/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.11.17" id="astra-theme-js-js"></script> <script src="https://bitrix-blog.ru/wp-includes/js/dist/dom-ready.min.js?ver=f77871ff7694fffea381" id="wp-dom-ready-js"></script> <script id="starter-templates-zip-preview-js-extra"> var starter_templates_zip_preview = {"AstColorPaletteVarPrefix":"--ast-global-color-","AstEleColorPaletteVarPrefix":["ast-global-color-0","ast-global-color-1","ast-global-color-2","ast-global-color-3","ast-global-color-4","ast-global-color-5","ast-global-color-6","ast-global-color-7","ast-global-color-8"]}; //# sourceURL=starter-templates-zip-preview-js-extra </script> <script src="https://bitrix-blog.ru/wp-content/plugins/astra-pro-sites/inc/lib/onboarding/assets/dist/template-preview/main.js?ver=06758d4d807d9d22c6ea" id="starter-templates-zip-preview-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://bitrix-blog.ru/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://bitrix-blog.ru/wp-includes/js/wp-emoji-loader.min.js </script>  <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(103971149, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/103971149" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <script type="text/javascript">  </script> </body> </html>