Sylvan's Blog
ПоискПоиск
Переключить светлую/тёмную темуОткрыть меню
Назад

Привет, мир!

986 слов

Добро пожаловать в мой блог

Это первая статья на русском языке. Многоязычные функции настроены:

  • 中文 (zh) — Язык по умолчанию
  • English (en)
  • 日本語 (ja)
  • Русский (ru)

Блог построен на Astro 6 с поддержкой переключения тёмной/светлой темы (палитра Gruvbox) и интегрированной системой комментариев Giscus. Блоки кода поддерживают подсветку синтаксиса, отображение diff и названий файлов. Математические формулы отображаются через KaTeX — как встроенные, так и блочные.

Цель этой статьи — протестировать рендеринг всех элементов синтаксиса Markdown и проверить работу плавающего оглавления (TOC) в различных сценариях.

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

Ширина TOC фиксирована — 192px, при размере шрифта 14px вмещается примерно 20–22 латинских символа. Этот заголовок значительно длиннее, поэтому в TOC он должен быть обрезан с ..., а при наведении показан полностью.

Столь же длинный подзаголовок третьего уровня для проверки различий в отступах при обрезке

Заголовки третьего уровня имеют дополнительный левый отступ в TOC, поэтому доступная ширина ещё меньше, и обрезка должна происходить раньше.

Короткие заголовки в порядке

Ниже короткие заголовки, которые должны отображаться в TOC полностью без всплывающих подсказок.

Короткий подзаголовок

Также отображается полностью.

Тест многоуровневой иерархии заголовков

TOC включает только h2 и h3, но статья содержит более глубокие уровни для проверки рендеринга заголовков.

Заголовок третьего уровня A

Виден в TOC с левым отступом.

Заголовки четвёртого уровня не попадают в TOC

Они не отображаются в TOC, но корректно рендерятся на странице.

Заголовки пятого уровня также не попадают

Глубокие заголовки — только для структурного тестирования.

Заголовок третьего уровня B

Снова на уровне, видимом в TOC.

Обзор синтаксиса Markdown

Этот раздел систематически тестирует различные элементы синтаксиса Markdown — от базовых стилей текста до сложных блоков кода и математических формул.

Стили текста

Это полужирный текст, это курсив, это полужирный курсив, это зачёркнутый текст, а это встроенный код.

Ссылки и изображения

Сайт Astro — генератор статических сайтов, используемый в этом блоге.

Arknights: Endfield

Цитаты

Это цитата, используемая для демонстрации рендеринга блочных цитат.

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

Кроме того, цитаты можно оформить как предупреждения с помощью синтаксиса [!TYPE]:

NOTE

Это примечание — дополнительная информация, которая может быть полезна читателю.

TIP

Это совет — полезное предложение, как сделать лучше или проще.

IMPORTANT

Это важно — ключевая информация, которую читатель должен знать.

WARNING

Это предупреждение — срочная информация, требующая немедленного внимания во избежание проблем.

CAUTION

Это предостережение — совет о потенциальных рисках или негативных последствиях.

Списки и вёрстка

Списки — основной инструмент организации информации.

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

  • Пункт первый: вводный текст
  • Пункт второй: ещё один момент
    • Вложенный пункт A: для уточнения
      • Более глубокая вложенность также поддерживается
    • Вложенный пункт B: ещё один подпункт
  • Пункт третий: возврат на верхний уровень

Нумерованные списки

  1. Шаг первый: инициализация структуры проекта
  2. Шаг второй: настройка зависимостей и параметров сборки
  3. Шаг третий: написание основного кода
    1. Подшаг 3.1 — реализация слоя данных
    2. Подшаг 3.2 — реализация бизнес-логики
  4. Шаг четвёртый: написание тестов для обеспечения качества кода
  5. Шаг пятый: развёртывание в продакшене

Списки задач

  • Выполнено: настройка проекта Astro 6
  • Выполнено: интеграция Tailwind CSS v4
  • Сделать: добавить плавающий компонент TOC
  • Сделать: оптимизировать производительность страниц
  • Сделать: написать пользовательскую документацию
  • Сделать: настроить CI/CD пайплайн

Таблицы и отображение данных

Базовая таблица

Язык Код Шрифт Описание
Китайский zh Noto Sans SC Оптимизирован для упрощённого китайского
Английский en Noto Sans Основной шрифт для латиницы
Японский ja Noto Sans JP Кана и кандзи
Русский ru Noto Sans Поддержка кириллицы

Сравнительная таблица языков

Возможность JavaScript TypeScript Python
Типизация Динамическая Статическая Динамическая (опциональные подсказки)
Среда выполнения Браузер/Node Компиляция в JS Интерпретатор
Пакетный менеджер npm/yarn/pnpm npm/yarn/pnpm pip/poetry
Порог вхождения Низкий Средний Низкий

Блоки кода

Блоки кода используют подсветку Shiki с поддержкой: нумерации строк по умолчанию, горизонтальной прокрутки по умолчанию, переноса строк по wrap с висячим отступом, сворачивания кода (collapse), меток файлов (file) и отключения нумерации (nolines).

Базовые аннотации: нумерация + file

Нумерация строк включена по умолчанию; file="имя" отображает метку с названием файла в левом верхнем углу.

def fib(n: int) -> list[int]:
    a, b = 0, 1
    for _ in range(n):
        a, b = b, a + b
    return afibonacci.py

Отключение нумерации: nolines

Короткие фрагменты с nolines скрывают нумерацию строк.

pnpm install
pnpm dev
pnpm build

Сворачивание + горизонтальная прокрутка: collapse

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

from datetime import datetime


def build_release_report(project: str, commits: list[dict[str, str]], include_review_notes: bool = False, timezone: str = "Asia/Shanghai") -> str:
    """Создаёт релизный отчёт и сохраняет длинную сигнатуру для проверки горизонтальной прокрутки."""
    lines = [f"# Релизный отчёт {project}", f"Сформирован: {datetime.now().isoformat()}", ""]
    for commit in commits:
        scope = commit.get("scope", "misc")
        title = commit.get("title", "Коммит без названия")
        lines.append(f"- [{scope}] {title} — {commit.get('hash', 'unknown')} — reviewer={commit.get('reviewer', 'none')} — deployment_window={commit.get('window', 'standard')}")
    if include_review_notes:
        lines.append("## Проверка")
        lines.append("Проверьте миграции, поисковый индекс, кэш статических ресурсов и путь отката перед публикацией.")
    return "\n".join(lines)


sample = [{"scope": "build", "title": "Обновить индекс Pagefind", "hash": "abc123", "reviewer": "Sylvan", "window": "nightly"}]
print(build_release_report("blog.sylvan.cafe", sample, include_review_notes=True))scroll-and-fold.py

Автоперенос + висячий отступ: wrap

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

def build_query_url(endpoint: str, filters: dict[str, str], include_archived: bool = False, sort: str = "updated_at:desc") -> str:
    return f"{endpoint}?include_archived={include_archived}&sort={sort}&filters=" + "&".join(f"{key}={value}" for key, value in filters.items())wrap-example.py

CSS

.astro-code {
  @apply rounded-lg border border-border;
  font-family: var(--font-code);
}

.astro-code .line {
  min-height: 1.5rem;
}

Mermaid-диаграммы

Блог теперь поддерживает Mermaid-диаграммы — используется тот же синтаксис огороженных блоков кода с языковым тегом mermaid. Диаграммы рендерятся в SVG на этапе сборки с помощью beautiful-mermaid, используя CSS-переменные для автоматической адаптации к светлой/тёмной теме.

Блок-схема

Да Нет Начало Условие? Действие Конец

Диаграмма последовательности

Отправить запрос Ответ Клиент Сервер

Диаграмма классов

Animal + age: int + gender: String + isMammal(): bool Duck + beakColor: String + swim() + quack() Fish - size: int - canEat()

Диаграмма состояний

старт успех сбой повтор Ожидание Обработка Готово Ошибка

Семантические цвета

Используйте classDef с CSS-переменными для смыслового выделения узлов, с автоматической адаптацией к светлой/тёмной теме:

ОК Ошибка ОК Ошибка Начало сборки Проверка синтаксиса Сборка артефакта Ошибка компиляции Запуск тестов Развёртывание Исправление кода

Математические формулы

Встроенные формулы

Эквивалентность массы и энергии E=mc2E = mc^2 — пожалуй, самая известная физическая формула. Теорема Пифагора a2+b2=c2a^2 + b^2 = c^2 столь же знакома.

Блочные формулы

Интеграл Гаусса:

∫0∞e−x2dx=π2\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

Функция плотности нормального распределения:

f(x)=1σ2πe−(x−μ)22σ2f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}

Тождество Эйлера:

eiπ+1=0e^{i\pi} + 1 = 0

Многострочные формулы

С использованием окружения aligned:

∇×B⃗−1c∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ∇×E⃗+1c∂B⃗∂t=0⃗∇⋅B⃗=0\def\arraystretch{1.5} \begin{aligned} \nabla \times \vec{\mathbf{B}} - \frac{1}{c} \frac{\partial\vec{\mathbf{E}}}{\partial t} &= \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} &= 4\pi\rho \\ \nabla \times \vec{\mathbf{E}} + \frac{1}{c} \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned}

Расширенные возможности

Сноски

Это предложение со сноской.1 Это другое предложение со сноской.2

Сворачиваемая панель HTML

Нажмите, чтобы развернуть

Это свёрнутое содержимое с поддержкой синтаксиса Markdown.

  • Элемент списка
  • Другой элемент
  • Ещё один элемент

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

Горизонтальные разделители

Горизонтальный разделитель использует три или более дефиса, звёздочки или подчёркивания.

Итоги и перспективы

В этой статье были систематически протестированы все элементы синтаксиса Markdown, поддерживаемые блогом. Через многоуровневую структуру заголовков проверены следующие возможности плавающего TOC:

  • Определение уровней заголовков (h2 и h3)
  • Отслеживание активного заголовка при прокрутке (IntersectionObserver)
  • Плавная прокрутка по клику (с компенсацией смещения)
  • Совместимость с многоязычным контентом

В планах на будущее — полнотекстовый поиск, облако тегов и оптимизация RSS-ленты.

Footnotes

  1. Это содержание сноски. Сноски отображаются в конце статьи. ↩

  2. Это длинная сноска для тестирования многострочного рендеринга. В многоязычном блоге якорные ссылки сносок должны корректно обрабатывать префиксы маршрутов. ↩

Поделиться:
Копировать ссылкуTelegramX (Twitter)EmailWhatsAppRedditFacebookLineWeChatQQ
CC BY-NC-SA 4.0
Следующая
Итоги 2026 года