Интерактивные примеры кода: демо живого превью

Этот пост демонстрирует нашу новую функцию живого превью кода. Теперь вы можете добавлять интерактивные примеры, которые читатели увидят в действии!

Простой пример с кнопкой

Начнём с простой интерактивной кнопки:

Пример с анимированной карточкой

А вот пример посложнее — с CSS-анимациями:

Динамический выбор цвета

Интерактивный пример с выбором цвета:

Как это работает

Чтобы создать такие живые примеры в своих markdown-файлах, используйте специальный суффикс :live:

• html:live для HTML-кода
• css:live для CSS-кода
• js:live для JavaScript-кода

Блоки кода автоматически объединяются в интерактивное превью, с которым читатели могут экспериментировать!

Обычный код тоже работает

Разумеется, обычные блоки кода по-прежнему работают как положено:

// This is a regular code block
function fibonacci(n) {
	if (n <= 1) return n
	return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55

Эта функция делает технические статьи гораздо интереснее и помогает читателям разобраться в материале через практические эксперименты!