Тест MDX: сложная разметка

Этот абзац через p → Txt в mdx-components. Жирный, курсив, inline code, комбинация жирный и код.

H2 Заголовок второго уровня

Обычный текст.

и
внешняя
.

H3 Третий уровень

Ниже — вложенные списки и нумерация.

Четвёртый уровень (h4 без кастомного компонента)

  • Маркированный уровень 1
    • Вложенный пункт
    • Ещё один
      • Третий уровень
  • Второй элемент верхнего уровня
  1. Нумерованный шаг один
  2. Шаг два
    • Подпункт с маркером
  3. Шаг три

Цитата: проверка блока blockquote и переносов строк. Вторая строка той же цитаты.

Код

Инлайн: const x = 1 и блок:

type DocSlug = string;

export function pickDoc(slug: DocSlug): boolean {
  return slug.length > 0;
}

pnpm --filter @kubik/public-frontend dev

Картинка по теме (ImageLazy)

Статика: public/media/front/ (в репозитории дублируется _apps/backend/media/front/). Имена {база}-light.png и {база}-dark.png. В MDX задаём базу без суффикса темы и без расширения, isTheme и format (см. ImageLazy в mdx-components).

Пример: картинка переключается вместе с темой сайта

Таблица (GFM — тогда useMDXComponents для table/th/td)

Элемент
Компонент
p
Txt
h1–h2
Txt
li
Txt внутри li

Явный Txt в JSX (импорт в MDX)

Этот блок рендерится явным <Txt /> — проверка импорта из MDX.

Нейтральный цвет, размер s.

FAQ (Faq / FaqItem)

Блок Faq / FaqItem из mdx-components: заголовок секции по умолчанию «Частые вопросы», можно задать title. Ответ — обычный MDX внутри элемента.

Пример FAQ в MDX

Пометка для разработчика (DevNote)

Видно только при локальном pnpm dev; в production-сборке блок не попадает в страницу.