Funkcje Markdown

Docusaurus obsługuje Markdown i kilka dodatkowych funkcji.

Front Matter

Dokumenty Markdown mają na górze metadane o nazwie Front Matter:

my-doc.md

---
id: my-doc-id
title: Tytuł mojego dokumentu
description: Opis mojego dokumentu
slug: /my-custom-url
---

## Nagłówek Markdown

Tekst Markdown z [linkami](./hello.md)

Linki

Obsługiwane są standardowe linki Markdown, wykorzystujące ścieżki URL lub względne ścieżki do plików.

Zobaczmy, jak [Utworzyć stronę](/create-a-page).

Zobaczmy, jak [Utworzyć stronę](./create-a-page.md).

Wynik: Zobaczmy, jak Utworzyć stronę.

Obrazy

Obsługiwane są standardowe obrazy Markdown.

Możesz używać absolutnych ścieżek do odwoływania się do obrazów w katalogu statycznym (static/img/docusaurus.png):

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

Możesz również odwoływać się do obrazów względnie względem bieżącego pliku. Jest to szczególnie przydatne, gdy chcesz umieścić obrazy blisko plików Markdown, które je wykorzystują:

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

Bloki kodu

Obsługiwane są bloki kodu Markdown z podświetlaniem składni.

```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 ma specjalną składnię do tworzenia ostrzeżeń i notatek:

:::tip[Moja rada]

Skorzystaj z tej świetnej opcji

:::

:::danger[Uwaga]

Ta akcja jest niebezpieczna.

:::

Moja rada

Skorzystaj z tej świetnej opcji

Uwaga

Ta akcja jest niebezpieczna.

MDX i komponenty React

MDX może sprawić, że Twoja dokumentacja będzie bardziej interaktywna i pozwala na używanie dowolnych komponentów React w Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`Kliknąłeś kolor ${color} z etykietą ${children}`);
    }}>
    {children}
  </span>
);

To jest <Highlight color="#25c2a0">zielony Docusaurus</Highlight>!

To jest <Highlight color="#1877F2">niebieski Facebooka</Highlight>!

To jest zielony Docusaurus!

To jest niebieski Facebooka!