Giải phẫu một bài viết kỹ thuật hiện đại trên y7.hk

Bài viết này tập hợp toàn bộ khả năng về mặt thị giác, kiểu chữ và media của engine render bài viết của chúng tôi.

1. Callout và ghi chú bên lề

Các callout theo phong cách đơn sắc chung của trang — các khối inset sạch sẽ, không có đèn giao thông đầy màu sắc:

2. Hình ảnh và media

So sánh hai phương án (grid media)

Lưới hai hình để so sánh giao diện “Trước” và “Sau”:

Avatar video trực tiếp của tác giả

Component video hình tròn tích hợp trong giao diện card:

Yakushev Hermann

Product Engineer · Southeast Asia

/me.mp4

3. Code, Diff patch và Terminal

Diff patch refactoring

Các dòng được thêm vào được highlight bằng màu ngọc lục nhẹ, dòng bị xóa bằng màu đỏ trầm:

  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,
    });
  }

Lệnh terminal (Bash)

Ký hiệu $ không được sao chép vào clipboard nhờ selector user-select: none:

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

4. Toán học và công thức KaTeX

Công thức display

Các công thức phức tạp được render với hỗ trợ cuộn ngang trên thiết bị di động:

\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

Công thức Transformer Attention¹:

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

Công thức inline

Ký hiệu toán học và phương trình ngay trong văn bản: e^{i\pi} + 1 = 0, phép nhân ma trận A \times B \in \mathbb{R}^{m \times p}, và chuẩn gradient \|\nabla \theta\| \le \epsilon.

5. Bảng hỗ trợ cuộn

Bảng được tự động bao bọc trong container cuộn responsive và giữ được độ đọc được trên smartphone:

6. Spoiler có thể thu gọn (<details>)

Accordion tương tác để ẩn log hoặc các đoạn tùy chọn:

{
  "id": "chatcmpl-98a72b",
  "model": "deepseek-r1",
  "choices": [
    {
      "message": {
        "role": "assistant",
        "content": "Pattern đã được xác thực thành công."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 128,
    "completion_tokens": 42
  }
}

7. Checklist và phím tắt

Danh sách công việc định dạng Markdown:

• Đã cấu hình hỗ trợ callout có màu
• Đã triển khai highlight code diff
• Đã tích hợp công thức toán KaTeX
• Đã thêm công tắc Serif / Sans
• Đã tạo kiểu <figcaption> cho file media
• Dự kiến thêm các scene 3D canvas tương tác

Phím tắt để điều khiển:

• Nhấn ⌘ + K để tìm kiếm toàn cục.
• Nhấn ~ để mở console.
• Nhấn Esc để đóng bất kỳ popup nào.

8. Trích dẫn có ghi nguồn

Thiết kế không chỉ là trông như thế nào và cảm giác ra sao. Thiết kế là nó hoạt động như thế nào. Steve Jobs

9. Chú thích học thuật

Văn bản có tham chiếu đến bài báo gốc về transformer². Khi click vào số chú thích, bạn sẽ được chuyển ngay đến panel chú thích ở cuối trang, và nhấn vào biểu tượng mũi tên ↩ sẽ đưa bạn quay lại đúng vị trí đang đọc.