Đánh dấu nổi bật

Đánh dấu nổi bật là một cú pháp mở rộng của Markdown, dùng để làm nổi bật văn bản quan trọng trong tài liệu. Nó giúp người đọc nhanh chóng nhận diện thông tin then chốt, khiến tài liệu sinh động và hiệu quả hơn.

Cú pháp cơ bản

Đánh dấu văn bản nổi bật

Trong hầu hết các mở rộng Markdown hỗ trợ highlight, văn bản nổi bật dùng hai dấu bằng (==) bao quanh nội dung cần làm nổi bật:

Đây là một ví dụ có chứa ==văn bản nổi bật==.

Hiệu ứng hiển thị:

Đây là một ví dụ có chứa ==văn bản nổi bật==.

Làm nổi bật từ và cụm từ

Highlight có thể áp dụng cho từ đơn lẻ hoặc cụm từ:

Trong lập trình, ==biến== là không gian đặt tên để lưu trữ dữ liệu.

Hãy đảm bảo đọc kỹ ==các lưu ý và cảnh báo quan trọng== trong tài liệu.

Hiệu ứng hiển thị:

Trong lập trình, ==biến== là không gian đặt tên để lưu trữ dữ liệu.

Hãy đảm bảo đọc kỹ ==các lưu ý và cảnh báo quan trọng== trong tài liệu.

Cách dùng nâng cao

Kết hợp với định dạng khác

Highlight có thể kết hợp với các định dạng Markdown khác:

==**Nổi bật đậm**==

==*Nổi bật nghiêng*==

==***Nổi bật đậm nghiêng***==

==`Nổi bật trong code`==

==[Nổi bật trong liên kết](https://www.markdownlang.com)==

Hiệu ứng hiển thị:

==Nổi bật đậm==

==Nổi bật nghiêng==

==Nổi bật đậm nghiêng==

==Nổi bật trong code==

==Nổi bật trong liên kết==

Làm nổi bật nội dung khối

Một số triển khai Markdown cho phép làm nổi bật cả một khối nội dung, thường dùng cú pháp container tuỳ chỉnh:

:::: highlight
Đây là một khối đoạn văn được làm nổi bật.

Nó có thể chứa nhiều dòng nội dung, thậm chí cả danh sách:
- Mục 1
- Mục 2
- Mục 3
::::

Lưu ý: Việc hỗ trợ highlight ở cấp khối khác nhau tùy bộ xử lý Markdown. Ví dụ trên khả dụng trong VitePress và các nền tảng hỗ trợ container tuỳ chỉnh.

Tương thích và khác biệt triển khai

Hỗ trợ trên các nền tảng

Nền tảng/Công cụ	Hỗ trợ highlight	Cú pháp
GitHub Markdown	❌	Không hỗ trợ
GitLab Markdown	✅	==highlight==
Hugo	✅	Thẻ mark hoặc ==highlight==
VitePress	✅	==highlight==
Pandoc	✅	==highlight== hoặc [highlight]{.mark}
Jekyll	✅	Phụ thuộc chủ đề và plugin
CommonMark	❌	Không hỗ trợ

Đầu ra HTML

Phần lớn các bộ xử lý Markdown hỗ trợ highlight sẽ chuyển văn bản nổi bật thành HTML với thẻ <mark> hoặc lớp CSS cụ thể:

<!-- Dùng thẻ mark -->
<p>Đây là ví dụ có <mark>văn bản nổi bật</mark>.</p>

<!-- Dùng lớp tuỳ chỉnh -->
<p>Đây là ví dụ có <span class="highlighted">văn bản nổi bật</span>.</p>

Cú pháp thay thế

Ở các nền tảng không hỗ trợ cú pháp highlight, có thể dùng thẻ HTML thay thế:

Đây là ví dụ có <mark>văn bản nổi bật</mark>.

<!-- Hoặc dùng kiểu tuỳ chỉnh -->
Đây là ví dụ có <span style="background-color: yellow;">văn bản nổi bật</span>.

Tình huống sử dụng

Nhấn mạnh nội dung tài liệu

Highlight phù hợp để nhấn mạnh nội dung quan trọng trong tài liệu:

# Hướng dẫn cài đặt

Vui lòng ==sao lưu đầy đủ dữ liệu của bạn== trước khi cài đặt. Quá trình cài đặt sẽ định dạng phân vùng đích.

Các bước cài đặt:
1. Tải trình cài đặt
2. Chạy trình hướng dẫn cài đặt
3. ==Chọn tuỳ chọn "Cài đặt tuỳ chỉnh"==
4. Hoàn tất theo hướng dẫn trên màn hình

Hiệu ứng hiển thị:

Hướng dẫn cài đặt

Vui lòng ==sao lưu đầy đủ dữ liệu của bạn== trước khi cài đặt. Quá trình cài đặt sẽ định dạng phân vùng đích.

Các bước cài đặt:

1. Tải trình cài đặt
2. Chạy trình hướng dẫn cài đặt
3. ==Chọn tuỳ chọn "Cài đặt tuỳ chỉnh"==
4. Hoàn tất theo hướng dẫn trên màn hình

Tài liệu giảng dạy

Highlight đặc biệt hữu ích trong tài liệu giảng dạy và đào tạo:

## Biến trong Python

Trong Python, gán giá trị cho biến dùng ký hiệu `=`:

```python
x = 10  # Gán giá trị 10 cho biến x

==Python là ngôn ngữ kiểu động; kiểu biến được xác định khi gán.==

Các kiểu biến phổ biến gồm:

• Số nguyên (int)
• Số thực (float)
• Chuỗi (str)
• Boolean (bool)

### So sánh và chỉnh sửa văn bản

Highlight có thể dùng để làm nổi bật sự thay đổi hoặc khác biệt trong tài liệu:

```markdown
## So sánh phiên bản tài liệu

### Bản gốc
Máy chủ sẽ bảo trì lúc 2:00 sáng Chủ Nhật hàng tuần.

### Bản cập nhật
Máy chủ sẽ bảo trì lúc 2:00 sáng Chủ Nhật hàng tuần. ==Thời lượng dự kiến 2 giờ.==

Hiệu ứng hiển thị:

So sánh phiên bản tài liệu

Bản gốc

Máy chủ sẽ bảo trì lúc 2:00 sáng Chủ Nhật hàng tuần.

Bản cập nhật

Máy chủ sẽ bảo trì lúc 2:00 sáng Chủ Nhật hàng tuần. ==Thời lượng dự kiến 2 giờ.==

Trích dẫn và chú thích

Highlight có thể dùng để đánh dấu trọng tâm trong phần trích dẫn:

> "Đây là một đoạn trích dẫn, ==phần này đặc biệt quan trọng== và cần được chú ý."
> 
> — Một tác giả nổi tiếng

Hiệu ứng hiển thị:

"Đây là một đoạn trích dẫn, ==phần này đặc biệt quan trọng== và cần được chú ý."

— Một tác giả nổi tiếng

Tuỳ biến kiểu dáng

Trong môi trường hỗ trợ tuỳ biến CSS, bạn có thể chỉnh kiểu của văn bản nổi bật:

/* Tuỳ chỉnh kiểu highlight */
mark, .highlighted {
  background-color: #ffeb3b;  /* Nền vàng */
  color: #000;                /* Chữ đen */
  padding: 0 3px;            /* Padding */
  border-radius: 3px;        /* Bo góc */
}

/* Các loại highlight khác nhau */
.highlight-warning {
  background-color: #ffcdd2;  /* Nổi bật dạng cảnh báo (đỏ) */
}

.highlight-success {
  background-color: #c8e6c9;  /* Nổi bật dạng thành công (xanh) */
}

Sử dụng kiểu tuỳ chỉnh:

Đây là <mark class="highlight-warning">thông tin cảnh báo</mark>, và đây là <mark class="highlight-success">thông tin thành công</mark>.

Thực tiễn tốt

Gợi ý sử dụng

✅ Nên làm:

1. **Dùng highlight ở mức vừa phải**:
   - Chỉ làm nổi bật nội dung thật sự quan trọng
   - Dùng quá nhiều sẽ làm giảm hiệu ứng nhấn mạnh
   
2. **Giữ tính nhất quán**:
   - Dùng phong cách highlight nhất quán trong toàn tài liệu
   - Có thể dùng kiểu khác nhau cho các loại nội dung trọng tâm
   
3. **Kết hợp với ngữ cảnh**:
   - Đảm bảo nội dung nổi bật có liên hệ logic với xung quanh
   - Có thể thêm chú thích ngắn giải thích lý do được làm nổi bật

❌ Tránh làm:

1. Làm nổi bật cả đoạn dài hoặc cả chương
2. Lạm dụng highlight trên một trang
3. Làm nổi bật nội dung không quan trọng
4. Dùng quá nhiều màu sắc/kiểu highlight khác nhau

Khả năng truy cập (a11y)

Highlight có thể gây khó đọc cho một số người dùng. Cân nhắc các điểm sau:

1. Đảm bảo độ tương phản đủ giữa màu highlight và nền
2. Không chỉ dựa vào màu sắc để truyền đạt thông tin
3. Cân nhắc thêm dấu hiệu phụ (như biểu tượng hoặc tiêu đề)
4. Kiểm tra khả năng đọc ở các chế độ (ví dụ chế độ tối)

Khắc phục sự cố

Highlight không hiển thị

Nếu highlight không hiển thị đúng:

1. Kiểm tra nền tảng có hỗ trợ cú pháp == hay không
2. Thử dùng thẻ HTML <mark> thay thế
3. Đảm bảo không có khoảng trắng giữa == và văn bản nổi bật
4. Kiểm tra tài liệu có tham chiếu đúng CSS hay chưa

Xung đột với định dạng khác

Highlight đôi khi xung đột với định dạng khác:

<!-- Cách viết có thể gây lỗi -->
==**Nội dung [định dạng](https://www.markdownlang.com) phức tạp**==

<!-- Cách an toàn hơn -->
<mark>**Nội dung [định dạng](https://www.markdownlang.com) phức tạp**</mark>

Vấn đề highlight cấp khối

Với trường hợp cần làm nổi bật cả một khối, nên dùng HTML hoặc container tuỳ chỉnh:

<!-- Dùng HTML -->
<div class="highlighted-block">

# Phần quan trọng

Đây là một khối nội dung cần làm nổi bật toàn bộ.

</div>

<!-- Hoặc dùng container tuỳ chỉnh (trên nền tảng hỗ trợ) -->
:::: highlight
# Phần quan trọng

Đây là một khối nội dung cần làm nổi bật toàn bộ.
::::

Cú pháp liên quan

• Nhấn mạnh - Cú pháp nhấn mạnh (đậm, nghiêng)
• Trích dẫn - Cú pháp trích dẫn khối
• HTML - Sử dụng HTML trong Markdown

Công cụ và plugin

• markdown-it-mark: thêm hỗ trợ highlight cho markdown-it
• remark-highlight.js: thêm tô sáng cú pháp cho mã nguồn
• gatsby-remark-highlight-code: plugin tô sáng mã trong Gatsby

Tổng kết

Highlight là một cú pháp mở rộng hữu hiệu, tăng khả năng đọc và khả năng nhìn thấy thông tin quan trọng. Dù không phải mọi bộ xử lý Markdown đều hỗ trợ sẵn cú pháp highlight, nhưng với thẻ HTML và CSS tuỳ chỉnh, ta có thể đạt hiệu ứng tương tự ở hầu hết môi trường. Sử dụng highlight hợp lý giúp người đọc nhanh chóng định vị nội dung quan trọng và nâng cao trải nghiệm đọc.