# Код

Блок «Код» позволяет добавить в лонгрид собственный HTML-блок: визуальный элемент, интерактив, анимацию, калькулятор или другой нестандартный фрагмент. Блок можно создать двумя способами:

1. сгенерировать прямо в Scrolltool;
2. вставить код, подготовленный во внешней нейросети или редакторе.

#### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок «плюс», чтобы открыть меню с блоками. Выберите блок «Код».

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/scaled-1680-/0Vjimage.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/0Vjimage.png)

#### Как выглядит блок?

В редакторе блок состоит из трех вкладок:

- **HTML** — структура блока;
- **CSS** — стили оформления;
- **JS** — логика и интерактивность.

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

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/scaled-1680-/nGsimage.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/nGsimage.png)

##### Вариант 1. Сгенерировать блок в Scrolltool

Откройте блок «Код» и разверните область «Сгенерировать с ИИ».

В поле промта опишите, какой блок хотите получить. Например:

> Сделай блок из трех преимуществ рисования: снижает стресс, развивает креативность, помогает расслабиться. Белый фон, три колонки, крупные иконки, тонкие линии, аккуратная типографика.

После генерации Scrolltool заполнит вкладки HTML, CSS и JS. Результат можно проверить в предпросмотре под редактором.

Если нужно изменить результат, напишите правку в том же поле и нажмите «**Доработать**».

Например:

> Сделай иконки меньше, добавь больше воздуха между колонками, а на мобильном устройстве расположи блоки друг под другом.

Если хотите получить новый вариант с нуля, нажмите «**Сгенерировать заново**».

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/scaled-1680-/tdhimage.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/tdhimage.png)

##### Вариант 2. Вставить код из внешней нейросети

Вы можете подготовить код в ChatGPT, DeepSeek, Claude или другом AI-сервисе, а затем вставить его в блок «Код».

Попросите нейросеть разделить результат на три части:

- HTML
- CSS
- JS

**Пример запроса**:

<p class="callout info">Сделай блок для Scrolltool и раздели код на три части: HTML, CSS и JS. И пишите ваш промт.</p>

Затем вставьте каждую часть в соответствующую вкладку блока:

- код из части HTML — во вкладку HTML;
- код из части CSS — во вкладку CSS;
- код из части JS — во вкладку JS.

[![image.png](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/scaled-1680-/RE0image.png)](https://wiki.scroll-tool.ru/uploads/images/gallery/2026-07/RE0image.png)

#### Важное ограничение

Код в блоке должен быть самодостаточным. Не используйте внешние файлы, ссылки и обращения к сети. Песочница Scrolltool их заблокирует.

Если внешняя нейросеть выдала код с такими строками:

> &lt;link rel="stylesheet" href="style.css"&gt;  
> &lt;script src="script.js"&gt;&lt;/script&gt;  
> &lt;link href="https://fonts.googleapis.com/..." rel="stylesheet"&gt;

их нужно убрать, а содержимое CSS и JS перенести во вкладки CSS и JS.

Но можно не руками а попросить нейросеть убрать ссылки, файлы и связь с внешними сервисами.