Markdown

Markdown hiển thị nội dung viết bằng Markdown (bài viết, ghi chú phát hành, mô tả từ CMS) theo kiểu chữ của Prose, an toàn với nội dung không tin cậy.

Truyền chuỗi Markdown làm children. Hỗ trợ CommonMark và phần GFM hay dùng: heading, đoạn văn, danh sách, danh sách việc, trích dẫn, bảng, code fence (tô màu bằng CodeBlock), đậm, nghiêng, gạch, code và link. Không nhận HTML: thẻ HTML hiện như chữ, link javascript: hay data: chỉ còn nhãn. Link tương đối (/path, #id) được giữ; link ngoài mở tab mới. inline cho đoạn một dòng: chỉ phần inline, trong một <span>. renderLink giao link cho router của app. Nội dung đang về theo từng token (câu trả lời AI) dùng StreamingMarkdown.

Bắt đầu với API

Mọi yêu cầu cần khoá API trong header Authorization. Tạo khoá ở trang Cài đặt.

Tạo khoá với quyền chỉ đọc.
Lưu khoá vào biến môi trường.
Gọi thử GET /v1/orders.

Gói	Yêu cầu / phút
Miễn phí	60
Pro	1.200

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { Markdown } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Gọi sonner.promise để đổi loading thành kết quả.
HTML từ CMS: xem Prose.

Inline

inline render phần inline trong một <span>, không bọc <p>: hợp với mục danh sách, ô bảng, mô tả một dòng.

Đọc hướng dẫn cài đặt hoặc Prose. Mã nguồn trên GitHub.

Đường dẫn: /

Link qua router

renderLink nhận href, title, nhãn và external; link nội bộ đi qua router của app (router.navigate, <Link to> của router) thay vì tải lại trang. Ví dụ thay router bằng state.

<img src=x onerror="alert(1)"> và bấm vào đây

Nội dung không tin cậy

HTML hiện như chữ, link javascript: chỉ còn nhãn; không cần sanitize trước.

Cách dùng

Nên

Dùng Markdown cho nội dung viết sẵn hoặc từ CMS; dùng StreamingMarkdown cho chữ đang về theo từng token.
Dùng inline cho đoạn một dòng nằm trong bố cục khác (mục danh sách, ô bảng).
Bật headingIds khi trang có mục lục hoặc link tới từng heading.

Không nên

Không dùng Markdown để hiện HTML từ CMS: HTML hiện như chữ. Dùng Prose với HTML đã sanitize.
Không đặt Markdown trong Prose: Markdown đã bọc Prose.

Props

Prop · Kiểu	Mặc định	Mô tả
childrenstring	Mặc định: —	Nội dung Markdown. Không nhận HTML.
inlineboolean	Mặc định: false	Chỉ phần inline (đậm, nghiêng, gạch, code, link) trong một <span>, không đoạn văn.
size"medium" \| "large"	Mặc định: "medium"	Cỡ chữ của Prose: body1 (14px) hoặc body2 (16px).
headingOffsetnumber	Mặc định: 1	Cộng vào cấp heading: mặc định # → h2.
headingIdsboolean \| ((text: string) => string)	Mặc định: false	Gắn id cho heading từ chữ của nó (bỏ dấu, khử trùng bằng -2, -3); truyền hàm để tự tạo id.
breaksboolean	Mặc định: false	Xuống dòng đơn thành <br>.
renderLink(link: MarkdownLink) => ReactNode	Mặc định: —	Tự render mọi link; MarkdownLink gồm href, title, children, external.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.markdown

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
newTabstring Chữ ẩn sau link mở tab mới.	Mặc định (tiếng Anh)`"(opens in new tab)"`	messagesVi`"(mở tab mới)"`
taskDonestring Chữ ẩn trước mục danh sách việc đã xong / chưa xong.	Mặc định (tiếng Anh)`"Done:"`	messagesVi`"Đã xong:"`
taskTodostring	Mặc định (tiếng Anh)`"Not done:"`	messagesVi`"Chưa xong:"`
tablestring Tên vùng cuộn của bảng.	Mặc định (tiếng Anh)`"Table"`	messagesVi`"Bảng"`