Ribasso

Introduzione

Fumadocs fornisce molte estensioni utili a MDX, un linguaggio di markup. Ecco una breve introduzione alla sintassi MDX predefinita dell'interfaccia utente di Fumadocs.

Ribasso

Utilizziamo GFM (GitHub Flavored Markdown), un superset di Markdown (CommonMark). Vedere Specifiche GFM.

# Heading

## Heading

### Heading

#### Heading

Hello World, **Bold**, _Italic_, ~~Hidden~~

```js
console.log('Hello World');
```

1. First
2. Second
3. Third

- Item 1
- Item 2

> Quote here

![alt](/image.png)

| Table | Description |
| ----- | ----------- |
| Hello | World       |

Collegamenti automatici

I collegamenti interni utilizzano il componente next/link per consentire il precaricamento ed evitare il ricaricamento forzato.

I collegamenti esterni riceveranno gli attributi rel="noreferrer noopener" target="_blank" predefiniti per motivi di sicurezza.

[My Link](https://github.github.com/gfm)

This also works: https://github.github.com/gfm.

##MDX

MDX è un superset di Markdown, con il supporto della sintassi JSX. Ti consente di importare componenti e utilizzarli direttamente nel documento o persino esportare valori.

import { Component } from './component';

<Component name="Hello" />

vedere Sintassi MDX per saperne di più.

Carte

Utile per aggiungere collegamenti, è incluso per impostazione predefinita.

<Cards>
  <Card
    href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
    title="Fetching, Caching, and Revalidating"
  >
    Learn more about caching in Next.js
  </Card>
</Cards>

Iicona

È possibile specificare un'icona per le carte.

import { HomeIcon } from 'lucide-react';

<Cards>
  <Card icon={<HomeIcon />} href="/" title="Home">
    Go back to home
  </Card>
</Cards>

Senza href

<Cards>
  <Card title="Fetching, Caching, and Revalidating">
    Learn more about `fetch` in Next.js.
  </Card>
</Cards>

Callout

Utile per aggiungere suggerimenti/avvertenze, è incluso per impostazione predefinita.

<Callout>Hello World</Callout>

Titolo

Specificare un titolo per il callout.

<Callout title="Title">Hello World</Callout>

Tipi

È possibile specificare il tipo di callout.

• info (predefinito)
• warn
• error

<Callout title="Title" type="error">
  Hello World
</Callout>

Personalizza componenti

Vedi tutti i componenti MDX e le opzioni disponibili.

Intestazioni

Un'ancora viene applicata automaticamente a ciascuna intestazione, disinfetta i caratteri non validi come gli spazi. (es. da Hello World a hello-world)

# Hello `World`

TOC Impostazioni

Il sommario (TOC) verrà generato in base ai titoli, puoi anche personalizzare gli effetti dei titoli:

# Heading [!toc]

This heading will be hidden from TOC.

# Another Heading [toc]

This heading will **only** be visible in TOC, you can use it to add additional TOC items.
Like headings rendered in a React component:

<MyComp />

Ancoraggio personalizzato

È possibile aggiungere [#slug] per personalizzare gli ancoraggi della rotta.

# heading [#my-heading-id]

Puoi anche concatenarlo con impostazioni TOC come:

# heading [toc] [#my-heading-id]

Per collegare le persone a un'intestazione specifica, aggiungi l'ID dell'intestazione al frammento hash: /page#my-heading-id.

Frontmatter

Supportiamo il frontmatter YAML. È un modo per specificare le informazioni comuni del documento (ad esempio il titolo). Posizionalo nella parte superiore del documento.

---
title: Hello World
---

## Title

Vedi Convenzioni di pagina per un elenco delle proprietà disponibili per frontmatter.

Blocco codice

L'evidenziazione della sintassi è supportata per impostazione predefinita utilizzando Rehype Code.

```js
console.log('Hello World');
```

Puoi aggiungere un titolo al blocco di codice.

```js title="My Title"
console.log('Hello World');
```

Evidenzia linee

Puoi evidenziare linee specifiche aggiungendo [!code highlight].

```tsx
<div>Hello World</div>  // [\!code highlight]
<div>Hello World</div>
<div>Goodbye</div>
<div>Hello World</div>
```

Evidenzia parole

Puoi evidenziare una parola specifica aggiungendo [!code word:<match>].

```js
// [\!code word:config]
const config = {
  reactStrictMode: true,
};
```

Diff

```ts
console.log('hewwo'); // [\!code --]
console.log('hello'); // [\!code ++]
```

console.log('hewwo'); 
console.log('hello'); 

Tab Gruppi

È possibile utilizzare blocchi di codice con il componente <Tab />.

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

<Tabs items={['Tab 1', 'Tab 2']}>
  <Tab value='Tab 1'>
    ```ts
    console.log('A');
    ```
  </Tab>
  <Tab value='Tab 2'>
    ```ts
    console.log('B');
    ```
  </Tab>
</Tabs>

console.log('A');

console.log('B');

Utilizzo del dattiloscritto con due barre

Scrivi blocchi di codice Typescript con informazioni sul tipo al passaggio del mouse e errori di tipo rilevati.

Non abilitato per impostazione predefinita. Vedi Duelash.

Immagini

Tutte le fonti di contenuto integrate gestiscono le immagini correttamente. Le immagini vengono ottimizzate automaticamente per next/image.

![Image](/image.png)

Opzionale

Alcuni plugin opzionali che puoi abilitare.

Equazioni matematiche

Scrivi equazioni matematiche con TeX.

```mdx
f(x) = x * e^{2 pi i \xi x}
```

f(x) = x * e^{2 pi i \xi x}

Per abilitare, vedere Integrazione matematica.

Installazione pacchetto

Genera blocchi di codice per l'installazione di pacchetti tramite gestori di pacchetti (JS/Node.js).

```mdx
npm i next -D
```

npm i next -D

Per abilitare, vedere Nota Install.

Altro

Puoi vedere un elenco di plugin supportati da Fumadocs.