Bài viết này được tạo ra để kiểm tra toàn diện giao diện hiển thị của blog sau khi update theme. Chúng ta sẽ review typography, code highlighting, tables và các custom components.

1. Typography Testing

Đây là một đoạn văn bản bình thường (paragraph). Nó được sử dụng để kiểm tra line-height, font-size và khả năng đọc (readability) trên nền sáng/tối. Chữ nghiêng (Italic) và chữ đậm (Bold) hiển thị như thế nào?

Heading 3

Heading 4

Heading 5

"Đây là một blockquote. Nó thường dùng để trích dẫn nội dung quan trọng hoặc câu nói nổi tiếng. Hy vọng nó có style border bên trái và background khác biệt một chút." — Anonymous

Danh sách không thứ tự (Unordered List):

• Item 1: Kiểm tra spacing giữa các dòng.
• Item 2: Nested list
  • Sub-item 2.1
  • Sub-item 2.2
• Item 3: Item cuối cùng.

Danh sách có thứ tự (Ordered List):

1. Bước đầu tiên là cài đặt môi trường.
2. Bước thứ hai là viết code.
3. Bước thứ ba là deploy.

2. Code Blocks & Syntax Highlighting

Kiểm tra hiển thị của inline code trong đoạn văn.

Dưới đây là một block code TypeScript:

interface User {
  id: number;
  name: string; // Tên người dùng
  role: "admin" | "user";
}

function greet(user: User): string {
  return `Xin chào, ${user.name}! Bạn là ${user.role}.`;
}

// Test long line to check horizontal scrolling behavior in the code block container styles
const longString = "This is a very long string that should probably cause the code block to scroll horizontally if the container width is constrained properly inside the layout.";

Và một đoạn CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background); /* Testing variables */
}

3. Custom MDX Components

YouTube Component

Test component nhúng video YouTube:

Mermaid Diagram

Test component vẽ biểu đồ Mermaid (Flowchart):

Test Mermaid (Sequence Diagram):

4. Media & Tables

Image

Test hiển thị ảnh (Markdown standard syntax):

Caption: Image caption text styling (figcaption).

Table

Kiểm tra hiển thị bảng dữ liệu:

Kết thúc bài test.