Markdown nâng cao

Khi cú pháp cơ bản và mở rộng của Markdown chưa đáp ứng đủ nhu cầu, bạn có thể dùng các kỹ thuật nâng cao và mẹo thay thế. Phần này hướng dẫn cách vượt qua giới hạn của Markdown để đạt bố cục và chức năng phức tạp hơn.

“Nâng cao” là gì?

“Nâng cao” (hay thủ thuật/biện pháp thay thế) là những phương pháp sáng tạo để đạt hiệu ứng định dạng mong muốn trong khuôn khổ giới hạn của Markdown. Thường bao gồm:

Nhúng mã HTML
Kết hợp nhiều phần tử cú pháp
Tận dụng tính năng mở rộng của nền tảng
Dùng công cụ và plugin bên thứ ba

Tình huống ứng dụng chính

Kiểm soát bố cục

Căn chỉnh văn bản
Bố cục nhiều cột
Trộn văn bản và hình ảnh
Điều chỉnh khoảng cách

Tùy biến kiểu dáng

Thiết lập màu sắc
Thay đổi phông chữ
Điều khiển kích thước
Hiệu ứng đặc biệt

Nội dung nâng cao

Công thức toán
Sơ đồ và biểu đồ
Phần tử tương tác
Nhúng đa phương tiện

Tăng cường với HTML

Thẻ HTML cơ bản

Markdown cho phép dùng trực tiếp thẻ HTML trong tài liệu:

html

<div style="text-align: center;">
  <strong style="color: red;">Văn bản đỏ đậm căn giữa</strong>
</div>

<img src="image.jpg" width="300" height="200" alt="Hình ảnh kích thước cố định">

<table border="1">
  <tr>
    <td style="background-color: #f0f0f0;">Bảng với kiểu tùy chỉnh</td>
  </tr>
</table>

Kiểm soát kiểu bằng CSS

Sử dụng CSS để kiểm soát chính xác:

html

<p style="color: blue; font-size: 18px; text-align: center;">
  Đoạn văn màu xanh, cỡ 18px, căn giữa
</p>

<div style="border: 2px solid #333; padding: 10px; border-radius: 5px;">
  Khối nội dung có viền
</div>

Xử lý hình ảnh nâng cao

Căn chỉnh hình ảnh

html

<!-- Căn trái -->
<img src="image.jpg" align="left" width="200">

<!-- Căn phải -->
<img src="image.jpg" align="right" width="200">

<!-- Căn giữa -->
<div align="center">
  <img src="image.jpg" width="300">
</div>

Điều khiển kích thước hình ảnh

html

<!-- Cố định rộng/cao -->
<img src="image.jpg" width="300" height="200">

<!-- Hình ảnh responsive -->
<img src="image.jpg" style="max-width: 100%; height: auto;">

<!-- Hình ảnh kèm viền -->
<img src="image.jpg" style="border: 2px solid #ddd; border-radius: 8px;">

Trộn văn bản và hình ảnh

html

<div style="display: flex; align-items: center;">
  <img src="avatar.jpg" width="80" height="80" style="margin-right: 15px;">
  <div>
    <h3 style="margin: 0;">Tên người dùng</h3>
    <p style="margin: 5px 0;">Đây là đoạn giới thiệu người dùng...</p>
  </div>
</div>

Tăng cường bảng

Tùy biến kiểu bảng

html

<table style="border-collapse: collapse; width: 100%;">
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px;">Tiêu đề cột 1</th>
      <th style="border: 1px solid #ddd; padding: 8px;">Tiêu đề cột 2</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: #f9f9f9;">
      <td style="border: 1px solid #ddd; padding: 8px;">Dữ liệu 1</td>
      <td style="border: 1px solid #ddd; padding: 8px;">Dữ liệu 2</td>
    </tr>
  </tbody>
</table>

Cấu trúc bảng phức tạp

html

<table>
  <tr>
    <td rowspan="2">Gộp hàng</td>
    <td>Ô bình thường</td>
  </tr>
  <tr>
    <td>Ô bình thường</td>
  </tr>
  <tr>
    <td colspan="2">Gộp cột</td>
  </tr>
</table>

Hỗ trợ công thức toán học

Cú pháp LaTeX

Có nhiều nền tảng hỗ trợ công thức LaTeX:

latex

Công thức nội tuyến: $E = mc^2$

Khối công thức:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Ma trận:
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

Tích hợp MathJax

html

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Lưu đồ và biểu đồ

Biểu đồ Mermaid

mermaid

graph TD
    A[Bắt đầu] --> B{Điều kiện}
    B -->|Đúng| C[Thực hiện A]
    B -->|Sai| D[Thực hiện B]
    C --> E[Kết thúc]
    D --> E

Biểu đồ Gantt

mermaid

gantt
    title Kế hoạch dự án
    dateFormat  YYYY-MM-DD
    section Giai đoạn thiết kế
    Phân tích yêu cầu      :done,    des1, 2023-01-01,2023-01-15
    Thiết kế UI            :active,  des2, 2023-01-16, 3d
    section Giai đoạn phát triển
    Phát triển frontend    :         dev1, after des2, 20d
    Phát triển backend     :         dev2, after des2, 25d

Phần tử tương tác

Khối nội dung có thể thu gọn

html

<details>
  <summary>Nhấp để mở rộng</summary>
  <p>Nội dung được thu gọn...</p>
</details>

Thanh tiến trình

html

<progress value="70" max="100">70%</progress>

Nút với kiểu tùy chỉnh

html

<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px;">
  Nhấn nút
</button>

Mẹo bố cục

Bố cục nhiều cột

html

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <div>
    <h3>Nội dung cột trái</h3>
    <p>Đây là nội dung ở cột trái...</p>
  </div>
  <div>
    <h3>Nội dung cột phải</h3>
    <p>Đây là nội dung ở cột phải...</p>
  </div>
</div>

Bố cục thẻ (card)

html

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
  <h3 style="margin-top: 0;">Tiêu đề thẻ</h3>
  <p>Mô tả nội dung thẻ...</p>
  <a href="#" style="color: #007bff; text-decoration: none;">Tìm hiểu thêm</a>
</div>

Tính năng theo nền tảng

Tính năng của GitHub

markdown

<!-- Danh sách công việc -->
- [x] Đã hoàn thành
- [ ] Chưa hoàn thành

<!-- Nhắc đến người dùng -->
@username

<!-- Trích dẫn issue -->
#123

<!-- Khác biệt mã (diff) -->
```diff
- Dòng bị xóa
+ Dòng được thêm


### Tính năng của GitLab

```markdown
<!-- Nhúng video -->
![video](video.mp4)

<!-- Nhúng âm thanh -->
![audio](audio.mp3)

Markdown nâng cao

“Nâng cao” là gì?

Tình huống ứng dụng chính

Kiểm soát bố cục

Tùy biến kiểu dáng

Nội dung nâng cao

Tăng cường với HTML

Thẻ HTML cơ bản

Kiểm soát kiểu bằng CSS

Xử lý hình ảnh nâng cao

Căn chỉnh hình ảnh

Điều khiển kích thước hình ảnh

Trộn văn bản và hình ảnh

Tăng cường bảng

Tùy biến kiểu bảng

Cấu trúc bảng phức tạp

Hỗ trợ công thức toán học

Cú pháp LaTeX

Tích hợp MathJax

Lưu đồ và biểu đồ

Biểu đồ Mermaid

Biểu đồ Gantt

Phần tử tương tác

Khối nội dung có thể thu gọn

Thanh tiến trình

Nút với kiểu tùy chỉnh

Mẹo bố cục

Bố cục nhiều cột

Bố cục thẻ (card)

Tính năng theo nền tảng

Tính năng của GitHub

Khuyến nghị thực hành tốt

Cân nhắc về tương thích

Tối ưu hiệu năng

Khả năng bảo trì

Công cụ và tài nguyên

Trình soạn thảo khuyến nghị

Công cụ trực tuyến

Tài nguyên tham khảo

Học thêm

Markdown nâng cao ​

“Nâng cao” là gì? ​

Tình huống ứng dụng chính ​

Kiểm soát bố cục ​

Tùy biến kiểu dáng ​

Nội dung nâng cao ​

Tăng cường với HTML ​

Thẻ HTML cơ bản ​

Kiểm soát kiểu bằng CSS ​

Xử lý hình ảnh nâng cao ​

Căn chỉnh hình ảnh ​

Điều khiển kích thước hình ảnh ​

Trộn văn bản và hình ảnh ​

Tăng cường bảng ​

Tùy biến kiểu bảng ​

Cấu trúc bảng phức tạp ​

Hỗ trợ công thức toán học ​

Cú pháp LaTeX ​

Tích hợp MathJax ​

Lưu đồ và biểu đồ ​

Biểu đồ Mermaid ​

Biểu đồ Gantt ​

Phần tử tương tác ​

Khối nội dung có thể thu gọn ​

Thanh tiến trình ​

Nút với kiểu tùy chỉnh ​

Mẹo bố cục ​

Bố cục nhiều cột ​

Bố cục thẻ (card) ​

Tính năng theo nền tảng ​

Tính năng của GitHub ​

Khuyến nghị thực hành tốt ​

Cân nhắc về tương thích ​

Tối ưu hiệu năng ​

Khả năng bảo trì ​

Công cụ và tài nguyên ​

Trình soạn thảo khuyến nghị ​

Công cụ trực tuyến ​

Tài nguyên tham khảo ​

Học thêm ​

Markdown nâng cao

“Nâng cao” là gì?

Tình huống ứng dụng chính

Kiểm soát bố cục

Tùy biến kiểu dáng

Nội dung nâng cao

Tăng cường với HTML

Thẻ HTML cơ bản

Kiểm soát kiểu bằng CSS

Xử lý hình ảnh nâng cao

Căn chỉnh hình ảnh

Điều khiển kích thước hình ảnh

Trộn văn bản và hình ảnh

Tăng cường bảng

Tùy biến kiểu bảng

Cấu trúc bảng phức tạp

Hỗ trợ công thức toán học

Cú pháp LaTeX

Tích hợp MathJax

Lưu đồ và biểu đồ

Biểu đồ Mermaid

Biểu đồ Gantt

Phần tử tương tác

Khối nội dung có thể thu gọn

Thanh tiến trình

Nút với kiểu tùy chỉnh

Mẹo bố cục

Bố cục nhiều cột

Bố cục thẻ (card)

Tính năng theo nền tảng

Tính năng của GitHub

Khuyến nghị thực hành tốt

Cân nhắc về tương thích

Tối ưu hiệu năng

Khả năng bảo trì

Công cụ và tài nguyên

Trình soạn thảo khuyến nghị

Công cụ trực tuyến

Tài nguyên tham khảo

Học thêm