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.
# Dùng list comprehension thay vì vòng lặp thủ côngresult = [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)
# ĐỪNG làm vậy — gây memory leakwhile True: data = load_large_dataset() process(data) # dataset không bao giờ được giải phóngSolution — Giải pháp đúng
Solution (Cách đúng — dùng generator)
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:
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
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ừ
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
10 collapsed lines
# --- BOILERPLATE (thu gọn) ---import osimport jsonimport torchimport loggingfrom pathlib import Pathfrom dataclasses import dataclassfrom transformers import AutoTokenizer, AutoModelForCausalLMfrom torch.utils.data import DataLoaderlogging.basicConfig(level=logging.INFO)
# --- PHẦN QUAN TRỌNG (hiển thị) ---@dataclassclass 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: break11 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
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")}FROM python:3.12-slim
WORKDIR /appCOPY requirements.txt .RUN pip install --no-cache-dir -r requirements.txt
COPY . .CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]services: api: build: . ports: - "8000:8000" environment: - DATABASE_URL=postgresql://user:pass@db:5432/mydb db: image: postgres:16 volumes: - pgdata:/var/lib/postgresql/datavolumes: 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à , learning rate là .
Block Math
Tables
| Phương pháp | Tốc độ | Memory | Độ chính xác | Ghi chú |
|---|---|---|---|---|
| Full Fine-tuning | Chậm | Rất cao | Cao nhất | Cần nhiều GPU |
| LoRA | Nhanh | Thấp | Cao | Phổ biến nhất |
| QLoRA | Trung bình | Rất thấp | Gần LoRA | Dùng 4-bit quant |
| Prompt Tuning | Rất nhanh | Rất thấp | Thấp hơn | Chỉ train soft tokens |
| Adapter | Nhanh | Thấp | Cao | Thê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

Ảnh có caption (căn giữa)
<div style="text-align: center;">_Chú thích ảnh ở đây_</div>
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 ToCTip (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.
Links & References
- Tên link bình thường
- Link tới section trong bài — dùng
#tên-section-lowercase-dấu-gạch - Link external — tự động mở tab mới (cấu hình trong
astro.config.ts)
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: