Анатомия современного инженерного текста на y7.hk

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

1. Врезки и примечания (Callouts)

Врезки вписаны в общий монохромный стиль сайта — чистые инсет-блоки без светофора из разноцветных рамок:

2. Изображения и медиа

Сравнение двух вариантов (Grid медиа)

Сетка из двух изображений для сравнения интерфейсов «До» и «После»:

Живой видео-аватар автора

Круговой видео-компонент, интегрированный в интерфейс карточки:

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. Код, Diff-патчи и Терминал

Diff-патч рефакторинга

Строки со вставками подсвечиваются мягким изумрудным цветом, удаленные — приглушенным красным:

  export async function handleRequest(req: Request): Promise<Response> {
-   const legacyToken = req.headers.get("x-legacy-token");
-   if (!legacyToken) return new Response("Unauthorized", { status: 401 });
+   const authSession = await verifyAgentSession(req);
+   if (!authSession.valid) {
+     return Response.json({ error: "Session expired" }, { status: 403 });
+   }

    return await processWorkflow({
-     mode: "sync",
+     mode: "streaming-duplex",
      timeout: 30000,
    });
  }

Команда терминала (Bash)

Символ $ не копируется в буфер обмена благодаря селектору user-select: none:

git clone https://github.com/yakushev/Y.git && cd Y
npm install
npm run build

4. Математика и формулы KaTeX

Выключная формула (Display Math)

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

\mathcal{L}_{\text{total}} = \alpha \cdot \mathbb{E}_{x \sim p_{\text{data}}}\left[\log D(x)\right] + \beta \cdot \sum_{i=1}^{N} \left\| \nabla_x f(x_i) \right\|_2^2

Формула внимания Transformer Attention¹:

\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V

Инлайн-формулы

Математические символы и уравнения прямо внутри текста: e^{i\pi} + 1 = 0, матричное умножение A \times B \in \mathbb{R}^{m \times p} и норма градиента \|\nabla \theta\| \le \epsilon.

5. Таблицы со скролл-поддержкой

Таблицы автоматически оборачиваются в адаптивный скролл-контейнер и сохраняют читаемость на смартфонах:

6. Сворачиваемые спойлеры (<details>)

Интерактивные аккордеоны для скрытия логов или опциональных фрагментов:

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Паттерн успешно валидирован."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. Чеклисты и горячие клавиши

Список задач в формате Markdown:

• Настроена поддержка цветных коллаутов
• Реализована подсветка diff-кода
• Внедрены математические формулы KaTeX
• Добавлен переключатель Serif / Sans
• Оформлены подписи <figcaption> к медиафайлам
• Запланировано добавление интерактивных 3D canvas сцен

Горячие клавиши для управления:

• Нажмите ⌘ + K для глобального поиска.
• Нажмите ~ для вызова консоли.
• Нажмите Esc для закрытия любого всплывающего окна.

8. Цитаты с авторством

Дизайн — это не то, как предмет выглядит и ощущается. Дизайн — это то, как он работает. Стив Джобс

9. Академические сноски

Текст со ссылкой на первоисточник о трансформерах². При клике на номер сноски вас мгновенно перенесет в нижнюю панель сносок, а нажав на значок стрелки ↩, вы вернетесь точно к месту чтения.