Fer servir MDX | Aquaticat

Paràgraf

Això és un paràgraf.

Això és un paràgraf amb només unes quantes paraules més i només unes quantes paraules més i només unes quantes paraules més i només unes quantes paraules més.

Imatges / Vídeos / Àudios (extensió funcional d'aquest tema d'Astro)

![alt text](sample-image.png)

<a href='./sample-image.png'>
  <picture>
    <source srcset='sample-image.avif' />
    <source srcset='sample-image.dark.avif' media='(prefers-color-scheme: dark)' />
    <img src='sample-image.avif' alt='alt text' height='1024', width='1024' loading='lazy' />
  </picture>
</a>

![sample-video.vtt](sample-video.mkv)

Aquesta sortida HTML està manllevada de MDN: Adding Captions and Subtitles to Video.

<video controls preload='metadata'>
  <source src='sample-video.mkv' />
  <track
    src='sample-video.vtt'
    default />
</video>

![sample-audio.vtt](sample-audio.opus)

Aquí fem servir <video> en lloc de <audio> perquè <audio> no admet webvtt.

<video controls preload='metadata'>
  <source src='sample-audio.opus' />
  <track
    src='sample-audio.vtt'
    default />
</video>

Exemple

Alertes

<CalloutAlert data-type="note">Highlights information that users should take into account, even when skimming.</CalloutAlert>

NoteDestaca informació que els usuaris haurien de tenir en compte, fins i tot quan fan una lectura ràpida.

TipInformació opcional per ajudar l'usuari a tenir més èxit.

ImportantInformació crucial necessària perquè els usuaris tinguin èxit.

WarningContingut crític que requereix l'atenció immediata de l'usuari a causa de riscos potencials.

CautionConseqüències potencials negatives d'una acció.

Citacions

> Don't communicate by sharing memory, share memory by communicating.
>
> <cite>Rob Pike[^1]</cite>

Don't communicate by sharing memory, share memory by communicating.
Rob Pike (La citació anterior s'extreu de la xerrada de Rob Pike al Gopherfest, 18 de novembre de 2015.)

Taules

| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Cursiva	Negreta	Codi
cursiva	negreta	`codi`
cursiva	negreta	`codi`

UML

start
:Hello world;
:This is defined on
several **lines**;
stop

<a href='./hello-world.pu'>
  <picture>
    <source srcset='hello-world.svg' />
    <source srcset='hello-world.dark.svg' media='(prefers-color-scheme: dark)' />
    <img src='hello-world.svg' alt='alt text' height='1024', width='1024' loading='lazy' />
  </picture>
</a>

Llista

-   <p>Fruit</p>
    -   Apple
    -   Orange
    -   Banana
    -   <p>Dairy</p>
        1.  Milk
        2.  Cheese

Fruita
- Poma
- Taronja
- Plàtan
- Lactis
  1. Llet
  2. Formatge

Altres: abbr, sub, sup, kbd, mark, del

<abbr title='Graphics Interchange Format'>GIF</abbr> is a bitmap image format.

H<sub>2</sub>O X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

~~strikethrough~~

GIF és un format d'imatge de mapa de bits.

H₂O Xⁿ + Yⁿ = Zⁿ

Premeu CTRL + ALT + Supr per finalitzar la sessió.

La majoria de salamandres són nocturnes i cacen insectes, cucs i altres criatures petites.

~~ratllat~~