Style Guide cho blog Nhật ký học tập

Bài viết này đóng vai trò như một style reference cho blog. Mỗi thành phần đều có:

• 👀 UI hiển thị thực tế
• 📋 Mã HTML để copy dùng lại

---

1️⃣ Section – khối nội dung lớn

Preview:

Ví dụ Section

Section dùng cho một ý lớn hoặc một phần quan trọng của bài viết.

HTML để copy:

<section class="content-section">
  <h2>Tiêu đề Section</h2>
  <p>Nội dung section...</p>
</section>

---

2️⃣Warning Box

Preview:

Warning box

Warning box (hộp cảnh báo) là một khối nội dung được thiết kế để dừng người đọc lại, nhấn mạnh rằng:

⚠️ "Đoạn này quan trọng, dễ sai, hoặc có rủi ro nếu hiểu nhầm."

Nó không phải nội dung chính, mà là biển báo nguy hiểm trên đường tư duy.

HTML để copy:

<section class="warning-box">
  <strong>Warning box</strong>
  <p>Nội dung Warning box...</p>
</section >

---

3️⃣ Mental Box – chuyển đổi tư duy

Preview:

🧠 Mental Model

Mental box dùng để nhấn mạnh một cách nghĩ, không chỉ cung cấp thêm thông tin.

HTML để copy:

<div class="mental-box">
  <strong>🧠 Mental Model</strong>
  <p>Nội dung mental model...</p>
</div>

---

4️⃣ Code block – Prism

Preview:

var model = mlContext.BinaryClassification
    .Trainers.SdcaLogisticRegression();

HTML để copy:

<pre><code class="language-csharp">
var model = mlContext.BinaryClassification
    .Trainers.SdcaLogisticRegression();
</code></pre>

---

5️⃣ Công thức toán – KaTeX

Preview:

$$\min_w \sum_i \ell(y_i, f(x_i; w))$$

HTML để copy:

<div class="katex-display">
$$\min_w \sum_i \ell(y_i, f(x_i; w))$$
</div>

Inline math:

$x = w^Tx + b$

$x = w^Tx + b$

---

6️⃣ Diagram – Mermaid

Preview:

graph LR A[Data] --> B[Model] B --> C[Prediction]

HTML để copy:

<div class="mermaid">
graph LR
  A[Data] --> B[Model]
  B --> C[Prediction]
</div>

---

7️⃣ Table – so sánh & tổng hợp

Preview:

LP	Machine Learning
Tìm x	Học w

HTML để copy:

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value A</td>
      <td>Value B</td>
    </tr>
  </tbody>
</table>

---

8️⃣ Summary Box

Preview:

📌 Tóm tắt nhanh

• Section cho ý lớn
• Mental box cho chuyển đổi tư duy
• Code, Math, Diagram tách riêng

HTML để copy:

<div class="summary-box">
  <strong>📌 Tóm tắt nhanh</strong>
  <ul>
    <li>Ý 1</li>
    <li>Ý 2</li>
  </ul>
</div>

Tham khảo

Một số emoji