Tabele și diagrame

Nu orice parte a unui articol este text sau cod. O comparație între trei opțiuni cere un tabel, iar o ordine de rezolvare sau un traseu de cerere cere o diagramă. Ambele se scriu ca markdown obișnuit și niciuna nu trece prin pipeline-ul pentru cod.

Tabele

Tabelele folosesc sintaxa cu bare verticale: un rând de antet, un rând delimitator, apoi câte un rând per înregistrare. Barele exterioare sunt opționale, iar coloanele nu trebuie aliniate în sursă.

1| Adnotare | Se aplică la | Efect |
2| --- | --- | --- |
3| `!mark` | O linie | Evidențiază linia |
4| `!diff +` | O linie | Marchează linia ca inserată |
5| `!word-wrap` | Blocul | Încadrează liniile lungi pe loc |

Adnotare	Se aplică la	Efect
`!mark`	O linie	Evidențiază linia
`!diff +`	O linie	Marchează linia ca inserată
`!word-wrap`	Blocul	Încadrează liniile lungi pe loc

Markdown-ul inline funcționează în interiorul celulelor, așa că o celulă poate conține cod, accentuare sau un link. O celulă nu poate conține un bloc: fără paragrafe, liste sau blocuri de cod delimitate. Un tabel care are nevoie de ele este de obicei, de fapt, un set de secțiuni cu titluri.

Alinierea coloanelor

Două puncte în rândul delimitator stabilesc alinierea pentru fiecare coloană. :--- aliniază la început, :---: centrează, iar ---: aliniază la sfârșit. O coloană fără două puncte este aliniată la început.

1| Manager de pachete | Install | Exec |
2| :--- | :---: | ---: |
3| Yarn | `add` | `dlx` |
4| pnpm | `add` | `dlx` |
5| npm | `install` | `npx` |

Manager de pachete	Install	Exec
Yarn	`add`	`dlx`
pnpm	`add`	`dlx`
npm	`install`	`npx`

Lățime

Un tabel mai lat decât coloana articolului se derulează pe orizontală, în loc să își strivească celulele, iar celulele de antet nu se încadrează pe mai multe rânduri. Prin urmare, titlurile scurte de coloană și celulele scurte se citesc mai bine decât un tabel care trebuie derulat ca să fie înțeles.

Diagrame

Un bloc delimitat marcat cu mermaid este redat ca diagramă. Conținutul este sursă Mermaid, care acoperă, printre altele, diagrame de flux, diagrame de secvență, diagrame de stare, diagrame de clase și diagrame entitate-relație.

1```mermaid
2flowchart LR
3  mdx[Fișier MDX] --> remark[Plugin-uri remark]
4  remark --> codehike[CodeHike]
5  codehike --> page[Pagina redată]
6```

Merită să apelezi la o diagramă atunci când subiectul are o formă: o arhitectură, un graf de dependențe, un flux de lucru sau un set de tranziții de stare. O diagramă care repetă o listă de două elemente este zgomot.

Cum le tratează site-ul

Un bloc mermaid este preluat înainte ca CodeHike să îl vadă. Adnotările de cod precum !mark și !diff nu au, prin urmare, niciun sens în interiorul lui, iar o diagramă nu poartă niciunul dintre elementele vizuale ale blocurilor de cod: fără etichetă de limbaj, fără numere de linie și fără buton de copiere.

Culorile vin din tema site-ului, nu din paletele proprii ale Mermaid, așa că o diagramă preia familia de temă a secțiunii în care se află și urmează modul luminos și cel întunecat împreună cu restul paginii. Stilurile de noduri și de muchii scrise în diagrama însăși au în continuare prioritate, ceea ce este chiar rostul scrierii lor.

Desenarea se face în browser, iar biblioteca este descărcată doar pentru paginile care conțin o diagramă. Dacă sursa nu poate fi interpretată, pagina o afișează ca text în loc să eșueze.