Markdown Боломжууд

Docusaurus нь Markdown болон зарим нэмэлт боломжуудыг дэмждэг.

Front Matter

Markdown баримт бичгүүд нь Front Matter гэж нэрлэгддэг мета өгөгдлийг хамгийн дээрээ агуулдаг:

my-doc.md

---
id: my-doc-id
title: Миний баримт бичгийн гарчиг
description: Миний баримт бичгийн тайлбар
slug: /my-custom-url
---

## Markdown гарчиг

[Холбоосуудтай](./hello.md) Markdown текст

Холбоосууд (Links)

URL зам эсвэл харьцангуй файлын замыг ашиглан ердийн Markdown холбоосууд дэмжигддэг.

[Хуудас хэрхэн үүсгэх](/create-a-page)-тэй танилцацгаая.

[Хуудас хэрхэн үүсгэх](./create-a-page.md)-тэй танилцацгаая.

Үр дүн: Хуудас хэрхэн үүсгэх-тэй танилцацгаая.

Зургууд (Images)

Ердийн Markdown зургууд дэмжигддэг.

Та static директор доторх зургуудыг ашиглахдаа абсолют зам ашиглаж болно (static/img/docusaurus.png):

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

Мөн одоогийн файлтай харьцангуй замаар зургуудыг ашиглаж болно. Энэ нь зургуудыг ашиглаж буй Markdown файлуудтай нь ойр байлгахад тустай:

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

Код Блокууд (Code Blocks)

Синтакс тодотголтой Markdown код блокууд дэмжигддэг.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Сайн уу, Docusaurus!</h1>;
}
```

src/components/HelloDocusaurus.js

function HelloDocusaurus() {
  return <h1>Сайн уу, Docusaurus!</h1>;
}

Анхааруулга (Admonitions)

Docusaurus нь анхааруулга болон дуудлага үүсгэх тусгай синтакс агуулдаг:

:::tip[Миний зөвлөгөө]

Энэхүү гайхалтай боломжийг ашиглаарай

:::

:::danger[Анхаарна уу]

Энэ үйлдэл аюултай байж болзошгүй

:::

Миний зөвлөгөө

Энэхүү гайхалтай боломжийг ашиглаарай

Анхаарна уу

Энэ үйлдэл аюултай байж болзошгүй

MDX болон React Компонентууд

MDX нь таны баримт бичгийг илүү интерактив болгож, Markdown дотор дурын React компонентуудыг ашиглах боломжийг олгодог:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`Та ${color} өнгө дээр ${children} шошготой дарлаа`)
    }}>
    {children}
  </span>
);

Энэ бол <Highlight color="#25c2a0">Docusaurus ногоон</Highlight> !

Энэ бол <Highlight color="#1877F2">Facebook цэнхэр</Highlight> !

Энэ бол Docusaurus ногоон !

Энэ бол Facebook цэнхэр !