Recursos do Markdown

O Docusaurus suporta Markdown e alguns recursos adicionais.

Front Matter

Documentos Markdown têm metadados no topo chamados Front Matter:

meu-doc.md

---
id: meu-id-do-doc
title: Título do meu documento
description: Descrição do meu documento
slug: /minha-url-personalizada
---

## Título Markdown

Texto Markdown com [links](./hello.md)

Links

Links Markdown comuns são suportados, usando caminhos de URL ou caminhos de arquivo relativos.

Vamos ver como [Criar uma página](/create-a-page).

Vamos ver como [Criar uma página](./create-a-page.md).

Resultado: Vamos ver como Criar uma página.

Imagens

Imagens Markdown comuns são suportadas.

Você pode usar caminhos absolutos para referenciar imagens no diretório estático (static/img/docusaurus.png):

![Logo do Docusaurus](/img/docusaurus.png)

Você também pode referenciar imagens relativas ao arquivo atual. Isso é particularmente útil para colocar imagens próximas aos arquivos Markdown que as utilizam:

![Logo do Docusaurus](./img/docusaurus.png)

Blocos de Código

Blocos de código Markdown são suportados com realce de sintaxe.

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

src/components/HelloDocusaurus.js

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

Admoestações (Admonitions)

O Docusaurus tem uma sintaxe especial para criar admoestações e avisos:

:::tip[Minha dica]

Use esta opção de recurso incrível

:::

:::danger[Cuidado]

Esta ação é perigosa

:::

Minha dica

Use esta opção de recurso incrível

Cuidado

Esta ação é perigosa

MDX e Componentes React

O MDX pode tornar sua documentação mais interativa e permite o uso de qualquer componente React dentro do Markdown:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`Você clicou na cor ${color} com o rótulo ${children}`)
    }}>
    {children}
  </span>
);

Isso é <Highlight color="#25c2a0">verde Docusaurus</Highlight> !

Isso é <Highlight color="#1877F2">azul Facebook</Highlight> !

Isso é verde Docusaurus !

Isso é azul Facebook !