← Назад в журнал

Мой первый пост с интерактивом

Привет! Это первый пост в новом блоге.

Здесь мы используем MDX — это значит, что мы можем писать обычный Markdown, но при этом встраивать настоящие React-компоненты.

Например, вот игра "Бимбо Цвета", которая работает прямо внутри статьи:

На главную

bimbo colors

Настоящая девчонка отличит правильный розовый из тысячи похожих. Докажи, что твои глаза — твой главный модный аксессуар!

Pink is not just a color, it's an obsession!

Круто, правда? Теперь можно делать интерактивные статьи, туториалы и рассказывать истории с помощью кода.

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

  1. Текст пишется в обычном .mdx файле
  2. Метаданные (заголовок, дата, теги) задаются в самом начале файла (frontmatter)
  3. Next.js и next-mdx-remote парсят этот файл и превращают его в HTML + React

Это цитата, чтобы проверить стили Markdown.

А вот список:

  • Пункт 1
  • Пункт 2
  • Пункт 3

Код тоже подсвечивается:

console.log("Hello from MDX!");