Mga Tampok ng Markdown

Sinusuportahan ng Docusaurus ang Markdown at ilang karagdagang mga tampok.

Front Matter

Ang mga Markdown na dokumento ay may metadata sa itaas na tinatawag na Front Matter:

my-doc.md

---
id: my-doc-id
title: Pamagat ng aking dokumento
description: Paglalarawan ng aking dokumento
slug: /my-custom-url
---

## Markdown heading

Markdown text na may [mga link](./hello.md)

Mga Link

Ang mga regular na Markdown link ay sinusuportahan, gamit ang mga url path o relative file path.

Tignan natin kung paano [Gumawa ng pahina](/create-a-page).

Tignan natin kung paano [Gumawa ng pahina](./create-a-page.md).

Resulta: Tignan natin kung paano Gumawa ng pahina.

Mga Imahe

Ang mga regular na Markdown imahe ay sinusuportahan.

Maaari kang gumamit ng mga absolute path para i-reference ang mga imahe sa static directory (static/img/docusaurus.png):

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

Maaari mo ring i-reference ang mga imahe nang relative sa kasalukuyang file. Ito ay lalong kapaki-pakinabang upang pagsamahin ang mga imahe malapit sa mga Markdown file na gumagamit sa mga ito:

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

Mga Code Block

Ang mga Markdown code block ay sinusuportahan na may Syntax highlighting.

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

src/components/HelloDocusaurus.js

function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Mga Admonition

Ang Docusaurus ay may espesyal na syntax para gumawa ng mga admonition at callout:

:::tip[Aking tip]

Gamitin itong kahanga-hangang feature option

:::

:::danger[Mag-ingat]

Ang aksyong ito ay mapanganib

:::

Aking tip

Gamitin itong kahanga-hangang feature option

Mag-ingat

Ang aksyong ito ay mapanganib

MDX at React Components

Ang MDX ay maaaring gawing mas interactive ang iyong dokumentasyon at nagpapahintulot sa paggamit ng anumang React components sa loob ng Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`Clinic mo ang kulay na ${color} na may label na ${children}`)
    }}>
    {children}
  </span>
);

Ito ay <Highlight color="#25c2a0">Docusaurus green</Highlight> !

Ito ay <Highlight color="#1877F2">Facebook blue</Highlight> !

Ito ay Docusaurus green !

Ito ay Facebook blue !