Live HTML Preview
Живой предпросмотр HTML, CSS и JS в изолированном iframe
Live HTML Preview
Правка разметки сразу видна в окне предпросмотра. Без внешних зависимостей, рендер идёт в изолированном iframe.
Домен code, грузится лениво. Выделенного shortcode нет, вставляется через atom.
Использование
{{< atom type="live-html-preview" >}}
instruction: "Сделай заголовок красным"
initialHTML: |
<h1>Привет</h1>
initialCSS: |
h1 { color: black; }
{{< /atom >}}
Параметры
| Параметр | Тип | Обязательный | Описание |
|---|---|---|---|
initialHTML |
string | нет | Начальный HTML |
initialCSS |
string | нет | Начальный CSS |
initialJS |
string | нет | Начальный JS |
instruction |
string | нет | Инструкция ученику |
autoRun |
boolean | нет | Запускать при правке (по умолчанию false) |
previewHeight |
number | нет | Высота preview в пикселях (по умолчанию 300) |
layout |
string | нет | vertical или horizontal (по умолчанию vertical) |