Logo
Overview
Blog Post Template — All Features Showcase

Blog Post Template — All Features Showcase

January 1, 2026
7 min read

Introduction

Đây là template đầy đủ cho một bài blog post trên trang này. Mọi tính năng đều được trình bày bên dưới — copy và chỉnh sửa theo nội dung của bạn.

Bài viết này trình bày cách sử dụng: Callout Blocks · Code Blocks · Math (KaTeX) · Tables · Images

Summary (Tổng quan bài viết)

Template này bao gồm đầy đủ các thành phần:

  • Callout boxes — Note, Tip, Warning, Danger, Summary, Explanation, Solution, v.v.
  • Code blocks — syntax highlighting, file title, diff markers (ins/del), collapsible sections
  • Math — inline (E = mc^2) và block equations
  • Tables, Images, Blockquotes, và Links

Sao chép template này làm điểm khởi đầu cho bài viết mới.

Note
  • Template này được thiết kế cho Astro MDX với rehype-expressive-code, rehype-katex, và astro-icon.
  • Thay './banner.png' trong frontmatter bằng ảnh bìa thực tế của bạn.

Callout Blocks

Tất cả các variant của <Callout> component. Import một lần ở đầu file, dùng ở bất kỳ đâu.

Note — Thông tin bổ sung

Note (Tiêu đề tùy chọn)

Dùng để cung cấp thông tin thêm, ngữ cảnh, hoặc tài liệu tham khảo. Hỗ trợ markdown bên trong: inline code, links, italics, v.v.

Tip — Mẹo hay

Tip (Mẹo tối ưu hóa)

Dùng để chia sẻ best practice hoặc shortcut hữu ích mà người đọc có thể áp dụng ngay.

quick_example.py
# Dùng list comprehension thay vì vòng lặp thủ công
result = [x * 2 for x in range(10)]

Warning — Cảnh báo

Warning (Lưu ý quan trọng)

Dùng khi có điều gì đó cần chú ý nhưng không gây lỗi ngay lập tức — ví dụ: deprecated API, side effect ẩn.

Danger — Nguy hiểm

Danger (Cách sai — tránh làm vậy)
bad_example.py
# ĐỪNG làm vậy — gây memory leak
while True:
data = load_large_dataset()
process(data)
# dataset không bao giờ được giải phóng

Solution — Giải pháp đúng

Solution (Cách đúng — dùng generator)
good_example.py
def stream_dataset(path):
with open(path) as f:
for line in f:
yield json.loads(line)
for sample in stream_dataset("data.jsonl"):
process(sample)

Explanation — Giải thích sâu

Explanation

Q. Tại sao generator tiết kiệm memory hơn list?
A. Generator lazy evaluation — chỉ tính từng phần tử khi được yêu cầu, không nạp toàn bộ dataset vào RAM một lúc.

Summary — Tóm tắt

Summary (Tóm tắt phần này)
  • Note (xanh dương) — thông tin bổ sung
  • Tip (xanh lá) — mẹo thực tế
  • Warning (vàng) — cảnh báo nhẹ
  • Danger (đỏ) — lỗi phổ biến, cần tránh
  • Solution (xanh ngọc đậm) — cách làm đúng
  • Explanation (xanh lime) — Q&A, giải thích sâu

Các variant khác

Important

Dùng important (tím) cho điều kiện tiên quyết hoặc quyết định kiến trúc quan trọng.

Example (Ví dụ minh họa)

Dùng example (emerald) cho các ví dụ cụ thể, case study, hoặc demo.

Definition (Định nghĩa: Gradient Descent)

Gradient Descent là thuật toán tối ưu hóa lặp, cập nhật tham số theo chiều ngược gradient của hàm mất mát:

θt+1=θtηθL(θt)\theta_{t+1} = \theta_t - \eta \nabla_\theta \mathcal{L}(\theta_t)

Recall (Nhắc lại kiến thức cũ)

Dùng recall (xanh nhạt) để nhắc lại khái niệm đã học trước đó mà người đọc cần nhớ.

Intuition (Tại sao điều này đúng?)

Dùng intuition (vàng) để giải thích cảm tính / trực giác đằng sau một công thức hay thuật toán.


Code Blocks

Powered by Expressive Code — hỗ trợ titles, diff markers, collapsible sections, line numbers.

Cú pháp cơ bản

```python title="tên_file.py"
code ở đây
```

Diff Markers — Highlight thêm / xóa

optimizer.py
import torch
def train_step(model, batch, optimizer):
# BAD
optimizer.zero_grad()
loss = model(batch).loss # tính loss mỗi step nhưng không accumulate
# GOOD
loss = model(batch).loss / ACCUMULATION_STEPS
loss.backward()
if (step + 1) % ACCUMULATION_STEPS == 0:
optimizer.step()
optimizer.zero_grad()

Inline Text Diff — Highlight từng từ

config.py
model = AutoModelForCausalLM.from_pretrained(
model_id,
attn_implementation='eager',
attn_implementation='flash_attention_2',
torch_dtype=torch.bfloat16,
)

Collapsible Sections — Thu gọn code dài

full_training_loop.py
10 collapsed lines
# --- BOILERPLATE (thu gọn) ---
import os
import json
import torch
import logging
from pathlib import Path
from dataclasses import dataclass
from transformers import AutoTokenizer, AutoModelForCausalLM
from torch.utils.data import DataLoader
logging.basicConfig(level=logging.INFO)
# --- PHẦN QUAN TRỌNG (hiển thị) ---
@dataclass
class TrainConfig:
model_id: str = "meta-llama/Llama-3-8B"
lr: float = 2e-4
batch_size: int = 4
max_steps: int = 1000
def train(cfg: TrainConfig):
model = AutoModelForCausalLM.from_pretrained(cfg.model_id)
optimizer = torch.optim.AdamW(model.parameters(), lr=cfg.lr)
for step, batch in enumerate(DataLoader(..., batch_size=cfg.batch_size)):
loss = model(**batch).loss
loss.backward()
optimizer.step()
optimizer.zero_grad()
if step % 100 == 0:
print(f"Step {step}: loss={loss.item():.4f}")
if step >= cfg.max_steps:
break
11 collapsed lines
# --- BOILERPLATE (thu gọn) ---
if __name__ == "__main__":
import argparse
parser = argparse.ArgumentParser()
parser.add_argument("--model_id", type=str)
parser.add_argument("--lr", type=float, default=2e-4)
parser.add_argument("--batch_size", type=int, default=4)
parser.add_argument("--max_steps", type=int, default=1000)
args = parser.parse_args()
train(TrainConfig(**vars(args)))

Inline Code với Syntax Highlighting

Dùng cú pháp {:lang} ở cuối để highlight inline code:

  • Python: model.forward(x)
  • TypeScript: const fn = async (): Promise<void> => {}
  • Bash: docker compose up -d
  • JSON key: "attn_implementation"
Note (Inline highlight cú pháp)

Thêm {:ngôn_ngữ} ngay sau closing backtick — không có dấu cách:

`Animator.SetTrigger("Run"){:csharp}`
`torch.no_grad(){:python}`
`SELECT * FROM users{:sql}`

Multi-language trong một bài

server.go
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
func main() {
r := gin.Default()
r.GET("/health", func(c *gin.Context) {
c.JSON(http.StatusOK, gin.H{"status": "ok"})
})
r.Run(":8080")
}
Dockerfile
FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
docker-compose.yml
services:
api:
build: .
ports:
- "8000:8000"
environment:
- DATABASE_URL=postgresql://user:pass@db:5432/mydb
db:
image: postgres:16
volumes:
- pgdata:/var/lib/postgresql/data
volumes:
pgdata:

Math (KaTeX)

Powered by remark-math + rehype-katex.

Inline Math

Dùng $...$ cho inline math. Lưu ý: tránh dùng {} bên trong inline math trong MDX vì bị parse nhầm thành JSX — thay bằng block math $$...$$.

Ví dụ đơn giản (không có {}): loss function là L=logP(yx)\mathcal{L} = -\log P(y \mid x), learning rate là η=0.001\eta = 0.001.

Block Math

Attention(Q,K,V)=softmax ⁣(QKdk)V\text{Attention}(Q, K, V) = \text{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right)V LCE=i=1Nyilog(y^i)\mathcal{L}_{\text{CE}} = -\sum_{i=1}^{N} y_i \log(\hat{y}_i) θθηv^t+ϵm^t(Adam optimizer)\theta \leftarrow \theta - \frac{\eta}{\sqrt{\hat{v}_t} + \epsilon} \cdot \hat{m}_t \quad \text{(Adam optimizer)}

Tables

Phương phápTốc độMemoryĐộ chính xácGhi chú
Full Fine-tuningChậmRất caoCao nhấtCần nhiều GPU
LoRANhanhThấpCaoPhổ biến nhất
QLoRATrung bìnhRất thấpGần LoRADùng 4-bit quant
Prompt TuningRất nhanhRất thấpThấp hơnChỉ train soft tokens
AdapterNhanhThấpCaoThêm layer nhỏ
Note (Căn chỉnh cột trong table)
  • :--- — căn trái
  • :---: — căn giữa
  • ---: — căn phải

Images

Ảnh cơ bản

![Alt text](./tên-ảnh.png)

Banner

Ảnh có caption (căn giữa)

<div style="text-align: center;">
![Alt text](./tên-ảnh.png)
_Chú thích ảnh ở đây_
</div>

Diagram Kiến trúc hệ thống tổng quan


Headings & Structure

Heading hierarchy theo đúng pattern của blog:

## Section lớn (H2) — xuất hiện trong Table of Contents
#### Sub-section (H4) — sub-section trong ToC
##### Sub-sub-section (H5) — level nhỏ nhất, KHÔNG trong ToC
Tip (Quy tắc heading)
  • Dùng ## cho các section chính (sẽ xuất hiện trong sidebar ToC).
  • Dùng #### cho các sub-section bên trong.
  • Dùng ##### cho level chi tiết nhất.
  • Bỏ qua H3 (###) để giữ nhất quán với style của blog.

Blockquotes & Lists

Blockquote

Đây là blockquote. Dùng > ở đầu dòng. Có thể nhiều dòng, và hỗ trợ bold, italic, inline code.

Danh sách có dấu đầu dòng bên trong Callout

Summary (Kết quả thực nghiệm)

Sau 3 tuần tối ưu:

  • Latency P99: 450ms → 120ms (giảm 73%)
  • Throughput: 12 req/s → 45 req/s (tăng 3.75×)
  • GPU Memory: 22GB → 14GB (giảm 36%)

Chi tiết xem ở phần Benchmark Results.



Afterword

Đây là phần kết bài — tóm tắt ngắn, lời cảm ơn, hoặc kêu gọi phản hồi.

Nguồn tham khảo: