Узнайте, как с помощью нейросети GigaChat легко конвертировать форматированный текст в чистую HTML-разметку без лишних стилей. Подробная инструкция с примерами поможет вам быстро освоить этот полезный инструмент для веб-разработки.
Форматированный текст
Для форматирования текста часто используются редакторы, позволяющие:
- Задавать заголовки различных уровней,
- Разделять абзацы и вставлять разрывы строк,
- Создавать маркированные и нумерованные списки разных уровней,
- Генерировать таблицы.
Примерами таких редакторов являются Microsoft Word, LibreOffice Writer, WPS Office. Также для визуального форматирования текста можно использовать онлайн-инструменты, такие как Google Документы и Яндекс.Документы. В нашем случае мы будем использовать документы из Яндекс.Диска.
Перед тем как начать получение HTML-разметки, текстовый документ должен быть полностью отформатирован.
Промпты для нейросети
При создании промтов важно учитывать, что нейросеть может включить в HTML-код стили оформления текста: цвет и размер шрифта, отступы и другие стилевые правила. Поскольку HTML предназначен исключительно для передачи структуры и содержания веб-страницы, в промптах следует указать, что стили исключены из HTML-разметки.
Пример такого запроса:
Прошу создавать код HTML без стилей, в ответ на каждый последующий промт.Подтверждением от нейросети может служить сообщение следующего вида:
Понял! Я буду генерировать чистый HTML-код без применения CSS-стилей. Отправляй свой первый запрос!Теперь вы можете добавлять в чат форматированные тексты, а нейросеть будет возвращать их HTML-разметку.
HTML-разметка обычного текста
Давайте создадим пример простого форматированного текста:
Выделите нужный фрагмент текста мышью или нажмите Ctrl + A (в английской раскладке), чтобы выделить весь текст. Затем скопируйте выделенный текст в буфер обмена (Ctrl + C).
Перейдите в чат с нейросетью и вставьте скопированный текст (Ctrl + V). Нейросеть выдаст запрошенную HTML-разметку:
Чтобы скопировать полученный код, наведите указатель мыши на ответ нейросети – в правом верхнем углу появится значок копирования. Кликните по нему, чтобы скопировать HTML-код в буфер обмена.
Затем откройте текстовый редактор, создайте HTML-документ и вставьте туда скопированный текст (Ctrl + V). Для этих целей мы используем редактор Visual Studio Code:
Этот HTML-код готов к дальнейшему использованию.
Получение HTML-документа для текстового документа
Иногда возникает необходимость вставить HTML-код в текстовый документ в виде листинга. В таком случае нужно копировать ответ нейросети не как код, а как форматированный документ.
Ответы нейросети формируются с использованием разметки Markdown. Для работы с Markdown существует множество приложений. Мы воспользуемся редактором Visual Studio Code с установленным расширением Markdown Editor (инструкции по установке расширения описаны в статье «Использование нейросети GigaChat для обработки текстов»).
Чтобы скопировать ответ нейросети как форматированный текст, нажмите на значок копирования, расположенный под ответом.
Переключитесь в Visual Studio Code, создайте файл с расширением .md, и вставьте в него ответ нейросети (Ctrl + V).
Удалите комментарии нейросети и переключитесь в режим предварительного просмотра (Ctrl + Shift + V).
В этом режиме выделите весь текст (Ctrl + A) и скопируйте его в буфер обмена (Ctrl + C). Затем перейдите в текстовый редактор и вставьте скопированный текст (Ctrl + V).
HTML-разметка таблицы
GigaChat также умеет создавать HTML-разметку для таблиц. Давайте рассмотрим пример:
Нейросеть вернет ее HTML-код:
Если вам предстоит работа с большими таблицами, стоит воспользоваться табличными редакторами:
И даже в этом случае GigaChat отлично справится:
HTML-разметка документа с внутренними ссылками
Если внутри документа установлены якоря, указывающие на определенные части документа, появляется возможность вставить в документ ссылки на эти части. Такой документ называется документом с якорными ссылками.
GigaChat способна самостоятельно вставить якоря на заголовки и создать оглавление из якорных ссылок. Рассмотрим это на примере:
- Создайте форматированный текст.
- Выделите все содержимое документа (
Ctrl + A) и скопируйте его в буфер обмена (Ctrl + C). - Перейдите в чат с GigaChat и отправьте следующий промпт:
Создай HTML-разметку форматированного текста, который будет предоставлен в следующем промте. До получения текста никаких действий не предпринимай.Добавь в HTML-разметку текста оглавление с якорными ссылками на соответствующие заголовки второго и третьего уровней. Оглавление должно быть вставлено перед первым заголовком второго уровня. Оглавление оформь в виде списка с различными уровнями.HTML-разметка текста и оглавления не должны содержать каких-либо стилей. - Вставьте ваш текст из буфера обмена следующим промптом (
Ctrl + V). - Скопируйте ответ нейросети.
Примеры:
