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️⃣ 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>

---

3️⃣ 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>

---

4️⃣ 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$

---

5️⃣ 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>

---

6️⃣ 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>

---

7️⃣ 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>

---

🧠 Mental Model

Một style guide tốt giúp bạn không phải nghĩ lại mỗi lần viết bài mới.