Skip to main content

Tính năng Markdown

Docusaurus sử dụng Markdown làm định dạng tác giả nội dung chính của nó.

Tìm hiểu Markdown Bạn có thể học Markdown trong 10 phút.

Docusaurus sử dụng công cụ hiện đại để giúp bạn tạo tài liệu tương tác.

Trình biên dịch MDX chuyển đổi các tệp Markdown thành các thành phần React và cho phép bạn sử dụng JSX trong nội dung Markdown của mình. Điều này cho phép bạn dễ dàng xen kẽ các thành phần React trong nội dung của mình và tạo ra trải nghiệm học tập thú vị.

Sử dụng MDX Playground Sân chơi MDX là người bạn tốt nhất mới của bạn!

Đây là một công cụ gỡ lỗi rất hữu ích cho thấy cách trình biên dịch MDX chuyển đổi Markdown thành React.

Tùy chọn: chọn đúng định dạng (MDX hoặc CommonMark) và các plugin sau mà Docusaurus sử dụng: , , .remark-gfmremark-directiverehype-raw

MDX so với CommonMark Docusaurus biên dịch cả hai và các tệp thành các thành phần React bằng trình biên dịch MDX, nhưng cú pháp có thể được giải thích khác nhau tùy thuộc vào cài đặt của bạn..md.mdx

Trình biên dịch MDX hỗ trợ 2 định dạng:

Định dạng MDX: một trình phân tích cú pháp mạnh mẽ cho phép sử dụng JSX Định dạng CommonMark: một trình phân tích cú pháp Markdown tuân thủ tiêu chuẩn không cho phép sử dụng JSX Theo mặc định, Docusaurus v3 sử dụng định dạng MDX cho tất cả các tệp (bao gồm cả tệp) vì lý do lịch sử..md

Có thể chọn tham gia CommonMark bằng cách sử dụng cài đặt siteConfig.markdown.format hoặc vấn đề phía trước.mdx.format: md

cách sử dụng CommonMark Nếu bạn định sử dụng CommonMark, chúng tôi khuyên bạn nên sử dụng cài đặt siteConfig.markdown.format: 'detect'. Định dạng thích hợp sẽ được chọn tự động, dựa trên phần mở rộng tệp:

.md sẽ sử dụng định dạng CommonMark .mdx các tệp sẽ sử dụng định dạng MDX Hỗ trợ CommonMark thử nghiệm Hỗ trợ CommonMark là thử nghiệm và hiện có một vài hạn chế.

Tính năng tiêu chuẩn Markdown là một cú pháp cho phép bạn viết nội dung được định dạng theo cú pháp có thể đọc được.

My Doc Section​

Hello world message with some bold text, some italic text, and a link

img alt

Phần Tài liệu của tôi Tin nhắn Hello world với một số văn bản in đậm, một số văn bản in nghiêng và một liên kết

img alt

Markdown là khai báo Vấn đề phía trước Front matter được sử dụng để thêm siêu dữ liệu vào tệp Markdown của bạn. Tất cả các plugin nội dung đều có lược đồ front matter riêng và sử dụng front matter để làm phong phú thêm siêu dữ liệu mặc định được suy ra từ nội dung hoặc cấu hình khác.

Vật chất phía trước được cung cấp ở trên cùng của tệp, được bao bọc bởi ba dấu gạch ngang. Nội dung được phân tích cú pháp dưới dạng YAML.---

title: My Doc Title more_data:

  • Can be provided
  • as: objects or: arrays

Thông tin Tài liệu API của mỗi plugin chính thức liệt kê các thuộc tính được hỗ trợ:

Tài liệu phía trước Blog front matter Trang mặt trước Nâng cao vấn đề phía trước của bạn Sử dụng hàm parseFrontMatter cấu hình Markdown để cung cấp trình phân tích cú pháp phía trước của riêng bạn hoặc để nâng cao trình phân tích cú pháp mặc định.

Có thể sử dụng lại trình phân tích cú pháp mặc định để bao bọc nó bằng logic độc quyền tùy chỉnh của riêng bạn. Điều này giúp bạn có thể thực hiện các phép chuyển đổi front matter, phím tắt thuận tiện hoặc tích hợp với các hệ thống bên ngoài bằng cách sử dụng front matter mà các plugin Docusaurus không hỗ trợ.

docusaurus.config.js

export default {
  markdown: {
    parseFrontMatter: async (params) => {
      // Reuse the default parser
      const result = await params.defaultParseFrontMatter(params);

      // Process front matter description placeholders
      result.frontMatter.description =
        result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');

      // Create your own front matter shortcut
      if (result.frontMatter.i_do_not_want_docs_pagination) {
        result.frontMatter.pagination_prev = null;
        result.frontMatter.pagination_next = null;
      }

      // Rename an unsupported front matter coming from another system
      if (result.frontMatter.cms_seo_summary) {
        result.frontMatter.description = result.frontMatter.cms_seo_summary;
        delete result.frontMatter.cms_seo_summary;
      }

      return result;
    },
  },
};

Quotes Trích dẫn Markdown được tạo kiểu đẹp mắt:

> Easy to maintain open source documentation websites.
>
> — Docusaurus

Dễ dàng duy trì các trang web tài liệu mã nguồn mở.

— Docusaurus

Chi tiết Markdown có thể nhúng các phần tử HTML và chi tiết các phần tử HTML được tạo kiểu đẹp mắt:

Details element example​

Toggle me!

This is the detailed content

console.log("Markdown features including the code block are available");

You can use Markdown here including bold and italic text, and inline link

Nested toggle! Some surprise inside...

😲😲😲😲😲

Thông tin
Bạn có thể muốn giữ của mình trên một dòng duy nhất. Hãy nhớ rằng MDX tạo thêm các đoạn HTML <p> cho ngắt dòng. Khi nghi ngờ, hãy sử dụng sân chơi MDX để khắc phục sự cố kết xuất.<summary><details>
5:10:59 AM