Hello World

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

Проверьте оба языка, светлую и тёмную темы, узкое окно и печать / сохранение в PDF. Медленное соединение поможет проверить плейсхолдеры и ленивую загрузку изображений. Ссылки языков сверху, кнопки копирования кода, галерея и форма подписки снизу — настоящие элементы управления. Форма подписки отправляет настоящий запрос; не отправляйте её только ради проверки внешнего вида.

Цвета, интервалы и отдельные состояния интерфейса собраны в дизайн-песочнице.

Иерархия заголовков

Название статьи сверху — H1. В тексте используются H2–H4; более глубокие уровни не входят в поддерживаемую иерархию блога.

H3: Подраздел с длинным названием для проверки переносов на узком экране

Абзац после H3 проверяет расстояние от заголовка до основного текста.

H4: Небольшой заголовок

Этот абзац должен выглядеть как основной текст, а не как подпись.

Последовательные заголовки

Между этими заголовками нет абзаца

Проверьте, что соседние заголовки остаются одной группой без большого разрыва.

Текст

Обычный абзац может включать жирный текст, курсив, inline code и обычную ссылку, а также удалённый текст. Текст должен аккуратно переноситься и сохранять читаемую длину строки.

Цитата должна быть спокойнее основного текста, но оставаться частью той же типографической системы.

Вот ссылка на сноску.¹

Начертания и знаки препинания

Жирный текст, курсив, жирный курсив, удалённый текст и ссылка с выделением должны визуально различаться.

Выделение маркером и мелкий текст показывают стили строчных элементов. Аббревиатура API содержит расшифровку. Вода — H₂O; степень — x². Нажмите ⌘ + C; вывод терминала: Сборка завершена.

«Кавычки», „вложенные кавычки“, “английские кавычки”, дефис в слове кто-то, интервал 2015–2026, длинное тире — и многоточие… Числа: 0123456789, 1 234,56, 50%, 99 ₽, €42.

Русский: Съешь ещё этих мягких французских булок, да выпей чаю.
English: The quick brown fox jumps over the lazy dog.
Смешанный текст: API-запрос, macOS, PostgreSQL, Сергей / Sergei, café, naïve, →, ±, ×, ✓.

Эта строка заканчивается принудительным переносом.
Эта строка относится к тому же абзацу.

Это новый абзац. Сравните его отступ с переносом строки выше.

Длинный строчный текст

Длинный идентификатор должен переноситься, не расширяя страницу: distributed_systems_configuration_with_a_deliberately_long_identifier_for_mobile_layout_checks.

Длинный видимый адрес тоже должен переноситься: https://example.com/documentation/distributed-systems/configuration/networking-and-service-discovery?language=ru&mode=reference

Вторая сноска проверяет несколько примечаний.² На первую можно сослаться повторно.¹

---

Абзац после разделителя проверяет вертикальные отступы.

GitHub Markdown

GitHub-flavored Markdown добавляет несколько привычных удобств. Голые ссылки должны становиться ссылками без дополнительной разметки:

https://grishy.dev

hello@example.com

В списке задач флажки должны выравниваться по тексту:

• Завершённая задача
• Ещё одна завершённая задача
• Незавершённая задача

Раскрываемая заметка

Это проверяет частый GitHub-паттерн для дополнительных деталей без отдельного компонента.

Списки

• Элемент неупорядоченного списка
• Еще один элемент с code
• Вложенное содержимое:
  • Дочерний элемент
  • Еще один дочерний элемент

1. Первый элемент
2. Второй элемент
3. Последний элемент

Таблица

Поверхность	Что проверяет	Статус
Текст	Ритм абзацев	Стабильно
Код	Подсветку и копирование	Стабильно
Изображения	Обработку и подписи	Стабильно

Выравнивание	Строчный текст	Длинный текст
Слева	код и выделение	Длинное предложение должно переноситься в ячейке.
Центр	link	Таблица должна оставаться читаемой на узких экранах.
Справа	Старый и актуальный текст	Эта строка проверяет разбор таблицы.

Раскрыто по умолчанию

Абзац и следующий за ним список должны сохранять обычные отступы:

• Первый пункт с выделением.
• Второй пункт со ссылкой.

Тест вложенности

Цитата может содержать список:

• Элемент внутри цитаты
• Элемент с inline code

code inside a quote

1. Пункт списка с несколькими абзацами.

   Это второй абзац того же пункта. Он должен выравниваться по тексту, а не по номеру списка.

   1. Вложенный нумерованный пункт.
   2. Ещё один пункт с кодом.
      • Маркер третьего уровня внутри нумерованного списка.

2. Следующий пункт верхнего уровня.

Абзац во внешней цитате.

Вложенная цитата с выделением и ссылкой.

Возвращение во внешнюю цитату.

Код

type Locale = "en" | "ru";

function postPath(locale: Locale, slug: string) {
  return `/${locale}/posts/${slug}/`;
}

console.log(postPath("ru", "hello-world"));

- duplicate draft fixtures
+ one published fixture

Обычный текст и горизонтальная прокрутка

Текст без указания языка подсветки.
English и русский в одном блоке кода.

curl --request GET 'https://example.com/api/projects?include=owner,contributors,deployments,configuration,observability&sort=updated_at&direction=descending'

Длинная команда должна прокручиваться внутри блока, а не расширять страницу. Скопируйте её, чтобы проверить, что строка сохраняется целиком.

Формулы

Формула внутри строки: $E = mc^2$.

Отдельная формула должна сохранять свой ритм:

$$\int_0^1 x^2 dx = \frac{1}{3}$$

Выноски

Изображение в Markdown

Изображение вставлено обычным синтаксисом Markdown, без подписи.

Изображение с подписью

Следующее изображение — без подписи, с другими пропорциями.

Галерея

Галерея из одного изображения проверяет просмотр без переключения между снимками.

Видео

Проверка встроенного видео

Footnotes

1. Это проверяет оформление и отступы сноски. ↩ ↩²

2. Длинная сноска с выделением, кодом и ссылкой. ↩