Онлайн-редактор кода с подсветкой синтаксиса — руководство по созданию своими руками

Инициализация подсветки синтаксиса

Пример использования Prism.js:

```html

```

После подключения библиотек, достаточно вызвать `Prism.highlightAll()` после вставки кода или его изменения. Однако тут возникает проблема: Prism работает только с нередактируемыми блоками. Чтобы обойти это ограничение, можно использовать нестандартный подход — ререндерить DOM после каждого изменения:

```javascript
const editor = document.querySelector('[contenteditable]');
editor.addEventListener('input', () => {
const code = editor.innerText;
editor.innerHTML = Prism.highlight(code, Prism.languages.javascript, 'javascript');
});
```

Важно: необходимо сохранять позицию курсора при пересоздании DOM. Для этого можно использовать Range API.

Нестандартные решения и оптимизация

Инкрементальная подсветка без полной перерисовки

Один из нестандартных подходов — использовать виртуальный редактор поверх обычного ``. Такой способ позволяет разделить слой ввода и слой отображения подсветки. Это реализуется следующим образом:</p> <p>- Внизу располагается `<textarea>` с прозрачным фоном;<br /> - Поверх накладывается `</p> <!-- SAPE RTB DIV ADAPTIVE --> <div class="srtb-tag-2069261722"></div> <!-- SAPE RTB END --> <div>` с подсвеченным текстом;<br /> - При каждом изменении текста обновляется только изменённый участок DOM.</p> <p>Подобный подход используется в некоторых редакторах вроде Ace и CodeMirror. Это значительно повышает производительность при больших объёмах текста (1000+ строк).</p> <h3>Обработка клавиатурных сокращений и отступов</h3> <p>Для удобства пользования важно реализовать поддержку клавиш Tab, Enter и автодополнения скобок. Пример обработки Tab в contenteditable:</p> <p>```javascript<br /> editor.addEventListener('keydown', e => {<br /> if (e.key === 'Tab') {<br /> e.preventDefault();<br /> document.execCommand('insertText', false, ' ');<br /> }<br /> });<br /> ```</p> <p>Такой подход работает во всех современных браузерах, но его стоит дополнить логикой автозавершения и автоотступов, особенно при работе с языками вроде Python или YAML.</p> <h2>Расширение функциональности</h2> <h3>Сохранение кода и локальное хранилище</h3> <div class="inserted-additional-image" style="margin:20px 0;"><img width="1024" height="585" src="https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-746-1024x585.jpg" class="sape-generated-additional-image" alt="Руководство по созданию простого онлайн-редактора кода с подсветкой синтаксиса - иллюстрация" style="max-width:100%; height:auto; margin: 15px 0;" decoding="async" loading="lazy" srcset="https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-746-1024x585.jpg 1024w, https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-746-300x171.jpg 300w, https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-746-768x439.jpg 768w, https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-746.jpg 1344w" sizes="auto, (max-width: 1024px) 100vw, 1024px" title="Онлайн-редактор кода с подсветкой синтаксиса — руководство по созданию своими руками"></div> <p>Чтобы сделать редактор более удобным, можно реализовать сохранение состояния с использованием LocalStorage:</p> <p>```javascript<br /> const storageKey = 'editor-code';</p> <p>editor.addEventListener('input', () => {<br /> localStorage.setItem(storageKey, editor.innerText);<br /> });</p> <p>window.addEventListener('load', () => {<br /> const saved = localStorage.getItem(storageKey);<br /> if (saved) editor.innerText = saved;<br /> });<br /> ```</p> <p>Это особенно полезно в образовательных проектах, где пользователи возвращаются к незавершённым заданиям.</p> <h3>Превращаем редактор в песочницу</h3> <p>Добавив возможность запуска кода (например, через функцию `eval()` для JS), можно превратить редактор в мини-среду разработки. Но важно помнить о безопасности: выполнение произвольного кода на клиенте несёт риски XSS-атак. Один из нестандартных способов изоляции — использование `iframe` с `sandbox`-атрибутами.</p> <h2>Заключение</h2> <p>Создание редактора кода с подсветкой синтаксиса — это не только техническая задача, но и вызов по UX, производительности и безопасности. Несмотря на наличие готовых решений, разработка собственного онлайн-редактора кода позволяет гибко адаптироваться под специфику проекта. Инструменты для подсветки синтаксиса, такие как Prism или Monaco, дают широкие возможности, особенно если комбинировать их с нестандартными подходами — виртуальными слоями, инкрементальной отрисовкой и кастомной логикой ввода.</p> <p>Если вы задумываетесь, как сделать редактор кода, который будет одновременно лёгким, быстрым и функциональным — начните с простого, но не бойтесь экспериментировать. И помните: лучший редактор — тот, который решает задачи пользователя быстрее и надёжнее других.</p> <p><script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://bitrix-blog.ru/%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0%d0%ba%d1%82%d0%be%d1%80-%d0%ba%d0%be%d0%b4%d0%b0-%d1%81-%d0%bf%d0%be%d0%b4%d1%81%d0%b2%d0%b5%d1%82%d0%ba%d0%be%d0%b9-%d1%81%d0%b8%d0%bd/" }, "headline": "Онлайн-редактор кода с подсветкой синтаксиса — руководство по созданию своими руками", "description": "Пошаговое руководство по разработке простого веб-редактора кода с синтаксической подсветкой. Подходящие технологии, структура проекта и советы по реализации.", "datePublished": "2025-09-19T03:25:09+00:00", "dateModified": "2025-09-19T03:25:10+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": "Руководство по созданию простого онлайн-редактора кода с подсветкой синтаксиса", "url": "https://bitrix-blog.ru/%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0%d0%ba%d1%82%d0%be%d1%80-%d0%ba%d0%be%d0%b4%d0%b0-%d1%81-%d0%bf%d0%be%d0%b4%d1%81%d0%b2%d0%b5%d1%82%d0%ba%d0%be%d0%b9-%d1%81%d0%b8%d0%bd/", "articleBody": "Введение: Зачем создавать собственный онлайн-редактор кода Современные разработчики всё чаще работают в браузере: от редактирования конфигураций до запуска тестов. Онлайн-редактор кода — это не просто текстовое поле, а полноценный инструмент с подсветкой синтаксиса, автодополнением и даже интеграцией с системами контроля версий. Несмотря на наличие готовых решений, создание собственного редактора даёт возможность гибкой кастомизации под конкретные нужды проекта или продукта. Например, команда, разрабатывающая обучающую платформу по JavaScript, может захотеть встроить в интерфейс редактор с ограниченными возможностями — только для нужного языка, с минимальным количеством зависимостей и кастомной логикой проверки кода. В таких случаях онлайн-редактор кода создание «с нуля» становится оправданным шагом. Архитектура редактора: от идеи к реализации Базовые требования к редактору Прежде чем приступить к разработке, важно определить минимальный набор функций. Для простого редактора это: - Подсветка синтаксиса (highlighting); - Поддержка основных языков (например, JavaScript, HTML, Python); - Возможность вставки и редактирования текста; - Поддержка тем (светлая и тёмная); - Обработка клавиш (Tab, Ctrl+S и др.). В зависимости от целей, можно добавить расширения: автодополнение, запуск кода, интеграция с API и сохранение сессий. Выбор подходящих инструментов для подсветки синтаксиса Одним из самых критичных этапов является выбор движка подсветки. Существует несколько популярных библиотек: - Prism.js — лёгкий и быстрый, хорош для статической подсветки; - Highlight.js — прост в использовании, подходит для большинства языков; - CodeMirror — полноценный редактор с множеством плагинов; - Monaco Editor — движок от Microsoft, лежащий в основе VS Code. Если задача — создание редактора кода с подсветкой, который будет встраиваться в обучающие платформы или документацию, Prism.js может быть идеальным выбором. Но если необходима полноценная IDE в браузере, без Monaco не обойтись. Реализация: от HTML до логики HTML и контейнер редактора Для начала создаём простую разметку, в которую будет встроен редактор: ```html // Напишите ваш код здесь ``` Такая структура позволяет использовать Prism.js или Highlight.js для подсветки, превращая `` в редактируемый блок. Инициализация подсветки синтаксиса Пример использования Prism.js: ```html ``` После подключения библиотек, достаточно вызвать `Prism.highlightAll()` после вставки кода или его изменения. Однако тут возникает проблема: Prism работает только с нередактируемыми блоками. Чтобы обойти это ограничение, можно использовать нестандартный подход — ререндерить DOM после каждого изменения: ```javascript const editor = document.querySelector('[contenteditable]'); editor.addEventListener('input', () => { const code = editor.innerText; editor.innerHTML = Prism.highlight(code, Prism.languages.javascript, 'javascript'); }); ``` Важно: необходимо сохранять позицию курсора при пересоздании DOM. Для этого можно использовать Range API. Нестандартные решения и оптимизация Инкрементальная подсветка без полной перерисовки Один из нестандартных подходов — использовать виртуальный редактор поверх обычного ``. Такой способ позволяет разделить слой ввода и слой отображения подсветки. Это реализуется следующим образом: - Внизу располагается `` с прозрачным фоном; - Поверх накладывается `` с подсвеченным текстом; - При каждом изменении текста обновляется только изменённый участок DOM. Подобный подход используется в некоторых редакторах вроде Ace и CodeMirror. Это значительно повышает производительность при больших объёмах текста (1000+ строк). Обработка клавиатурных сокращений и отступов Для удобства пользования важно реализовать поддержку клавиш Tab, Enter и автодополнения скобок. Пример обработки Tab в contenteditable: ```javascript editor.addEventListener('keydown', e => { if (e.key === 'Tab') { e.preventDefault(); document.execCommand('insertText', false, ' '); } }); ``` Такой подход работает во всех современных браузерах, но его стоит дополнить логикой автозавершения и автоотступов, особенно при работе с языками вроде Python или YAML. Расширение функциональности Сохранение кода и локальное хранилище Чтобы сделать редактор более удобным, можно реализовать сохранение состояния с использованием LocalStorage: ```javascript const storageKey = 'editor-code'; editor.addEventListener('input', () => { localStorage.setItem(storageKey, editor.innerText); }); window.addEventListener('load', () => { const saved = localStorage.getItem(storageKey); if (saved) editor.innerText = saved; }); ``` Это особенно полезно в образовательных проектах, где пользователи возвращаются к незавершённым заданиям. Превращаем редактор в песочницу Добавив возможность запуска кода (например, через функцию `eval()` для JS), можно превратить редактор в мини-среду разработки. Но важно помнить о безопасности: выполнение произвольного кода на клиенте несёт риски XSS-атак. Один из нестандартных способов изоляции — использование `iframe` с `sandbox`-атрибутами. Заключение Создание редактора кода с подсветкой синтаксиса — это не только техническая задача, но и вызов по UX, производительности и безопасности. Несмотря на наличие готовых решений, разработка собственного онлайн-редактора кода позволяет гибко адаптироваться под специфику проекта. Инструменты для подсветки синтаксиса, такие как Prism или Monaco, дают широкие возможности, особенно если комбинировать их с нестандартными подходами — виртуальными слоями, инкрементальной отрисовкой и кастомной логикой ввода. Если вы задумываетесь, как сделать редактор кода, который будет одновременно лёгким, быстрым и функциональным — начните с простого, но не бойтесь экспериментировать. И помните: лучший редактор — тот, который решает задачи пользователя быстрее и надёжнее других.", "image": { "@type": "ImageObject", "url": "https://bitrix-blog.ru/wp-content/uploads/2025/09/out-0-748.jpg", "width": 1024, "height": 1024 } }</script></p> <div class="post-views content-post post-2286 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">71</span> </div><!--c2664473827808--><div id='cB6vY_2664473827808'></div> </div><!-- .entry-content .clear --> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" aria-label="Posts"> <div class="nav-links"><div class="nav-previous"><a title="Мьютекс и семафор: разница в механизмах синхронизации потоков в программировании" href="https://bitrix-blog.ru/%d0%bc%d1%8c%d1%8e%d1%82%d0%b5%d0%ba%d1%81-%d0%b8-%d1%81%d0%b5%d0%bc%d0%b0%d1%84%d0%be%d1%80-%d1%80%d0%b0%d0%b7%d0%bd%d0%b8%d1%86%d0%b0-%d0%b2-%d0%bc%d0%b5%d1%85%d0%b0%d0%bd%d0%b8%d0%b7%d0%bc%d0%b0/" 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="Npm-скрипты для автоматизации разработки: как упростить рабочий процесс" href="https://bitrix-blog.ru/npm-%d1%81%d0%ba%d1%80%d0%b8%d0%bf%d1%82%d1%8b-%d0%b4%d0%bb%d1%8f-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%b0%d1%82%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d0%b8-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%ba/" 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> Npm-скрипты для автоматизации разработки: как упростить рабочий процесс </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><!-- #main --> </div><!-- #primary --> <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/%d0%b2%d0%b8%d0%bf-%d0%ba%d0%b0%d1%80%d0%b0%d0%be%d0%ba%d0%b5-%d0%b2-%d0%bc%d0%be%d1%81%d0%ba%d0%b2%d0%b5-%d0%b4%d0%bb%d1%8f-%d0%bd%d0%b5%d0%b7%d0%b0%d0%b1%d1%8b%d0%b2%d0%b0%d0%b5%d0%bc%d1%8b%d1%85/">Вип караоке в Москве для незабываемых корпоративов и вечеринок</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%be%d0%b1%d1%80%d0%b5%d0%b7%d0%bd%d0%b0%d1%8f-%d0%b4%d0%be%d1%81%d0%ba%d0%b0-%d0%be%d0%bf%d1%82%d0%be%d0%bc-%d0%ba%d0%b0%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d0%b2%d1%8b/">Обрезная доска оптом: качественный выбор для строительства</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%b3%d0%b8%d0%b4%d1%80%d0%b0%d0%b2%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%82%d0%be%d0%bb%d0%ba%d0%b0%d1%82%d0%b5%d0%bb%d0%b8-%d0%b2%d0%b0%d0%b6%d0%bd%d0%b0%d1%8f-%d1%87%d0%b0%d1%81/">Гидравлические толкатели: важная часть в такелажном оборудовании</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d1%85%d0%be%d0%bb%d0%be%d0%b4%d0%b8%d0%bb%d1%8c%d0%bd%d0%be%d0%b5-%d0%be%d0%b1%d0%be%d1%80%d1%83%d0%b4%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b2-%d0%ba%d1%80%d0%b0%d1%81%d0%bd%d0%be%d1%8f%d1%80/">Холодильное оборудование в Красноярске для бизнеса с удобной мебелью</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%bf%d0%b5%d1%87%d0%b0%d1%82%d1%8c-%d0%bd%d0%b0%d1%81%d1%82%d0%b5%d0%bd%d0%bd%d1%8b%d1%85-%d0%ba%d0%b0%d0%bb%d0%b5%d0%bd%d0%b4%d0%b0%d1%80%d0%b5%d0%b9-%d0%ba%d0%b0%d0%ba-%d0%b8%d0%bd%d0%b2%d0%b5/">Печать настенных календарей как инвестиция в рекламные возможности</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"> <!-- SAPE RTB DIV ADAPTIVE --> <div class="srtb-tag-2069261722"></div> <!-- SAPE RTB END --> </div></aside><aside id="serpzilla_links-3" class="widget "><!--2664473827808--><div id='Cg1M_2664473827808'></div></aside> </div><!-- .sidebar-main --> </div><!-- #secondary --> </div> <!-- ast-container --> </div><!-- #content --> <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"> <!-- SAPE RTB DIV ADAPTIVE --> <div class="srtb-tag-2069261722"></div> <!-- SAPE RTB END --> </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/%d0%b2%d0%b8%d0%bf-%d0%ba%d0%b0%d1%80%d0%b0%d0%be%d0%ba%d0%b5-%d0%b2-%d0%bc%d0%be%d1%81%d0%ba%d0%b2%d0%b5-%d0%b4%d0%bb%d1%8f-%d0%bd%d0%b5%d0%b7%d0%b0%d0%b1%d1%8b%d0%b2%d0%b0%d0%b5%d0%bc%d1%8b%d1%85/">Вип караоке в Москве для незабываемых корпоративов и вечеринок</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%be%d0%b1%d1%80%d0%b5%d0%b7%d0%bd%d0%b0%d1%8f-%d0%b4%d0%be%d1%81%d0%ba%d0%b0-%d0%be%d0%bf%d1%82%d0%be%d0%bc-%d0%ba%d0%b0%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d0%b2%d1%8b/">Обрезная доска оптом: качественный выбор для строительства</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%b3%d0%b8%d0%b4%d1%80%d0%b0%d0%b2%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%82%d0%be%d0%bb%d0%ba%d0%b0%d1%82%d0%b5%d0%bb%d0%b8-%d0%b2%d0%b0%d0%b6%d0%bd%d0%b0%d1%8f-%d1%87%d0%b0%d1%81/">Гидравлические толкатели: важная часть в такелажном оборудовании</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d1%85%d0%be%d0%bb%d0%be%d0%b4%d0%b8%d0%bb%d1%8c%d0%bd%d0%be%d0%b5-%d0%be%d0%b1%d0%be%d1%80%d1%83%d0%b4%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b2-%d0%ba%d1%80%d0%b0%d1%81%d0%bd%d0%be%d1%8f%d1%80/">Холодильное оборудование в Красноярске для бизнеса с удобной мебелью</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://bitrix-blog.ru/%d0%bf%d0%b5%d1%87%d0%b0%d1%82%d1%8c-%d0%bd%d0%b0%d1%81%d1%82%d0%b5%d0%bd%d0%bd%d1%8b%d1%85-%d0%ba%d0%b0%d0%bb%d0%b5%d0%bd%d0%b4%d0%b0%d1%80%d0%b5%d0%b9-%d0%ba%d0%b0%d0%ba-%d0%b8%d0%bd%d0%b2%d0%b5/">Печать настенных календарей как инвестиция в рекламные возможности</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><!-- #colophon --> </div><!-- #page --> <!--2664473827808--><div id='Cg1M_2664473827808'></div><script type="text/javascript"> <!-- var _acic={dataProvider:10,allowCookieMatch:false};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </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> <!-- 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(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> <!-- /Yandex.Metrika counter --> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script> </body> </html>