Softonic

Trình tạo hình ảnh Markdown

Bước 1 / 3
Tiếp theo

Cú pháp hình ảnh của Markdown, ![alt](src "title"), rất dễ viết sai: thiếu một dấu ngoặc, quên văn bản thay thế, hoặc nhầm với cú pháp liên kết, và tài liệu của bạn sẽ hiển thị một ô giữ chỗ bị lỗi. Trình tạo này nhận URL hình ảnh, văn bản thay thế, một tiêu đề tùy chọn và một đích liên kết tùy chọn, rồi xuất ra cả Markdown kiểu nội tuyến lẫn kiểu tham chiếu để bạn dán đúng loại phù hợp với tài liệu của mình.

Cách tạo cú pháp hình ảnh Markdown

  1. 1

    Dán URL hình ảnh

    URL tuyệt đối (https://...) hoặc đường dẫn tương đối (/images/hero.png).

  2. 2

    Viết văn bản thay thế

    Hình ảnh thể hiện điều gì, trong một câu. Bắt buộc để đảm bảo khả năng tiếp cận.

  3. 3

    Thêm tiêu đề (tùy chọn)

    Hiển thị khi di chuột qua trong hầu hết các trình kết xuất.

  4. 4

    Bọc trong một liên kết (tùy chọn)

    Cung cấp một URL để hình ảnh có thể nhấp vào.

  5. 5

    Sao chép đoạn mã

    Nhận đầu ra nội tuyến `![alt](src)` hoặc kiểu tham chiếu `![alt][ref]`.

Bốn biến thể cú pháp

Nội tuyến, không tiêu đề:

![Ảnh chính của sản phẩm](/images/hero.png)

Nội tuyến, có tiêu đề:

![Ảnh chính](/images/hero.png "Ảnh chính chụp vào tháng 10 năm 2026")

Hình ảnh có thể nhấp (hình ảnh được bọc trong một liên kết):

[![Ảnh chính](/images/hero.png)](https://example.com/buy)

Kiểu tham chiếu (giữ các URL dài nằm ngoài đoạn văn):

![Ảnh chính][hero]

[hero]: /images/hero.png "Ảnh chính chụp vào tháng 10 năm 2026"

Văn bản thay thế rất quan trọng

  • Khả năng tiếp cận. Trình đọc màn hình đọc to văn bản thay thế; alt rỗng khiến hình ảnh gần như vô hình đối với người dùng khiếm thị.
  • SEO. Công cụ tìm kiếm dùng văn bản thay thế để hiểu nội dung hình ảnh. Thiếu alt làm giảm lưu lượng từ tìm kiếm hình ảnh.
  • Suy giảm mượt mà. Nếu hình ảnh không tải được, văn bản thay thế là thứ người dùng nhìn thấy.

Văn bản thay thế tốt và xấu

Mục đích Alt tốt Alt xấu
Ảnh sản phẩm “Cốc gốm đỏ trên bàn gỗ, quai ở bên trái” “Hình ảnh chiếc cốc”
Ảnh chụp màn hình “Trang đăng nhập với email, mật khẩu và nút SSO” “screenshot.png”
Trang trí "" (alt rỗng cho mục đích trang trí thuần túy) “hình ảnh trang trí”
Đồ họa thông tin “Biểu đồ cột: doanh thu tăng từ 1 tỷ ₫ năm 2023 lên 3 tỷ ₫ năm 2026” “biểu đồ cột”

Những cạm bẫy

  • Đừng bắt đầu alt bằng “Hình ảnh của”, trình đọc màn hình đã thông báo đó là hình ảnh rồi.
  • Đường dẫn tuyệt đối so với tương đối. Đường dẫn tương đối sẽ hỏng khi tài liệu được kết xuất bên ngoài thư mục của nó (ví dụ trong bản xem trước trên GitHub). Khi phân vân, hãy dùng đường dẫn tuyệt đối.
  • Khoảng trắng trong URL cần được mã hóa URL: dùng %20 thay cho khoảng trắng, nếu không hình ảnh sẽ không tải.

Câu hỏi thường gặp

Không thể trong Markdown thuần. Hầu hết trình kết xuất (GFM, Docusaurus, MkDocs) quay về HTML thô để đặt kích thước, <img src="..." width="400" alt="...">. Một số phương ngữ hỗ trợ ![alt](url =400x), nhưng không phổ biến.

Alt là văn bản được trình đọc màn hình đọc to và hiển thị nếu hình ảnh không tải. Tiêu đề là chú giải công cụ xuất hiện khi di chuột qua: thường là tùy chọn và bị bỏ qua trên thiết bị cảm ứng.

Khi hình ảnh xuất hiện nhiều lần, hoặc khi URL dài và làm rối đoạn văn. Kiểu tham chiếu giữ cho văn bản dễ đọc và biến việc đổi URL thành một lần chỉnh sửa duy nhất.

Có, lồng một hình ảnh bên trong một liên kết ([![alt](img)](url)) là CommonMark tiêu chuẩn. Đầu ra được kết xuất là một siêu liên kết bao quanh một <img>.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Bảng tra cứu nhanh Markdown

Tài liệu Markdown thực dụng với bản xem trước thực tế và ví dụ có thể sao chép cho tiêu đề, danh sách, bảng, mã, liên kết, hình ảnh và cú pháp GFM.

Trình định dạng HTML

Định dạng HTML cục bộ trong trình duyệt với thụt lề hai hoặc bốn khoảng trắng. HTML không được tải lên hoặc xác thực.

Bảng Tra Regex

Tài liệu tham chiếu biểu thức chính quy có thể tìm kiếm cho JavaScript, PCRE2/PHP, Python re và .NET. So sánh mã thông báo, cú pháp riêng của máy, neo, nhóm, lookaround và cờ.

Công cụ này có phiên bản bằng các ngôn ngữ khác