Chuyển tới nội dung chính

Tính năng Markdown

Docusaurus hỗ trợ Markdown và một vài tính năng bổ sung.

Front Matter​

Các tài liệu Markdown có siêu dữ liệu ở trên cùng được gọi là Front Matter:

my-doc.md
---
id: my-doc-id
title: Tiêu đề tài liệu của tôi
description: Mô tả tài liệu của tôi
slug: /my-custom-url
---

## Tiêu đề Markdown

Văn bản Markdown với [liên kết](./hello.md)

Liên kết​

Các liên kết Markdown thông thường được hỗ trợ, sử dụng đường dẫn url hoặc đường dẫn tệp tương đối.

Hãy xem cách [Tạo một trang](/create-a-page).
Hãy xem cách [Tạo một trang](./create-a-page.md).

Kết quả: Hãy xem cách Tạo một trang.

Hình ảnh​

Các hình ảnh Markdown thông thường được hỗ trợ.

Bạn có thể sử dụng đường dẫn tuyệt đối để tham chiếu hình ảnh trong thư mục tĩnh (static/img/docusaurus.png):

![Docusaurus logo](/img/docusaurus.png)

Docusaurus logo

Bạn cũng có thể tham chiếu hình ảnh tương đối với tệp hiện tại. Điều này đặc biệt hữu ích để đặt hình ảnh gần các tệp Markdown sử dụng chúng:

![Docusaurus logo](./img/docusaurus.png)

Khối mã (Code Blocks)​

Các khối mã Markdown được hỗ trợ với tính năng làm nổi bật cú pháp.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Xin chào, Docusaurus!</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Xin chào, Docusaurus!</h1>;
}

Lời nhắc (Admonitions)​

Docusaurus có một cú pháp đặc biệt để tạo các lời nhắc và chú ý:

:::tip[Mẹo của tôi]

Sử dụng tùy chọn tính năng tuyệt vời này

:::

:::danger[Cẩn thận]

Hành động này rất nguy hiểm

:::
Mẹo của tôi

Sử dụng tùy chọn tính năng tuyệt vời này

Cẩn thận

Hành động này rất nguy hiểm

MDX và Thành phần React​

MDX có thể làm cho tài liệu của bạn tương tác hơn và cho phép sử dụng bất kỳ thành phần React nào bên trong Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`Bạn đã nhấp vào màu ${color} với nhãn ${children}`)
    }}>
    {children}
  </span>
);

Đây là <Highlight color="#25c2a0">Docusaurus xanh lá</Highlight> !

Đây là <Highlight color="#1877F2">Facebook xanh dương</Highlight> !

Đây là Docusaurus xanh lá !

Đây là Facebook xanh dương !