Skip to main content

Các Tính Năng của 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ó phần metadata ở đầu đượ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
---

## Đầu mục Markdown

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

Liên Kết​

Markdown hỗ trợ các liên kết thông thường, 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​

Markdown hỗ trợ chèn hình ảnh thông thường.

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

![Logo của Docusaurus](/img/docusaurus.png)

Logo của Docusaurus

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 khi để hình ảnh gần tệp Markdown đang sử dụng chúng:

![Logo của Docusaurus](./img/docusaurus.png)

Khối Mã​

Markdown hỗ trợ các khối mã 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>Hello, Docusaurus!</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Admonitions​

Docusaurus có cú pháp đặc biệt để tạo các chú ý và cảnh báo:

:::tip[Mẹo của tôi]
Sử dụng tính năng tuyệt vời này
:::

:::danger[Hãy cẩn thận]
Hành động này rất nguy hiểm
:::

:::tip[Mẹo của tôi]
Sử dụng tính năng tuyệt vời này
:::

:::danger[Hãy cẩn thận]
Hành động này rất nguy hiểm
:::

MDX và Các Thành Phần React​

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !

Mục lục