Învățarea Markdown: Ghid de stil

🌐

Markdown este un limbaj de marcare ușor pentru conținut care se convertește în HTML. Poți învăța elementele de bază în câteva minute și îl poți folosi în bloguri, documentație și README-uri. Acest ghid te ghidează prin cea mai utilă sintaxă, cu exemple.

Ce vei învăța: titluri, paragrafe, imagini, citate, tabele, blocuri de cod, liste și HTML inline.

Titluri

Folosește între unul și șase caractere # la începutul rândului. Un # este cel mai mare (ca <h1>), șase este cel mai mic (ca <h6>).

Sintaxă: # până la ###### la începutul rândului.

H1

H2

H3

H4

H5
H6

Paragrafe

Textul simplu formează un paragraf. Separa paragrafele cu o linie goală. Nu e nevoie de sintaxă suplimentară.

Sintaxă: Scrie normal. Folosește o linie goală între paragrafe.

Imagini

Pentru a adăuga o imagine, folosește semnul exclamării, textul alternativ în paranteze pătrate, apoi calea sau URL-ul în paranteze rotunde. Textul alternativ este folosit de cititoarele de ecran și când imaginea nu poate fi încărcată.

Sintaxă:

![Text alternativ](./calea/către/imagine.jpg)

Exemplu:

placeholder blog

Citate (blockquote)

Citatele sunt pentru text citat. Începe fiecare rând cu >. Poți folosi și alte elemente Markdown în interior (bold, italic, linkuri).

Citat fără atribuire

Sintaxă:

> Textul tău citat aici.
> **Notă** că poți folosi _sintaxa Markdown_ într-un citat.

Rezultat:

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Notă că poți folosi sintaxa Markdown în interiorul citatului.

Citat cu atribuire

Sintaxă:

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

Rezultat:

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1

Tabele

Tabelele folosesc pipe-uri | pentru coloane și un rând de liniuțe sub antet. Alinierea este opțională.

Sintaxă:

| Italic   | Bold     | Cod   |
| -------- | -------- | ----- |
| _italic_ | **bold** | `cod` |

Rezultat:

ItalicBoldCod
italicboldcod

Cod

Cod inline

Înfășoară codul în backtick-uri simple: `cod` pentru fragmente scurte, cum ar fi nume de variabile sau comenzi.

Blocuri de cod

Folosește un rând de trei backtick-uri, opțional adaugă un nume de limbaj pentru evidențiere, apoi codul tău, apoi trei backtick-uri pentru închidere.

Sintaxă: Deschide cu ``` pe un rând separat, opțional adaugă un limbaj (ex. html, javascript, css, markdown, typescript, bash), apoi închide cu ``` pe un rând nou.

```html
<!doctype html>
<html lang="ro">
  <head>
    <meta charset="utf-8" />
    <title>Exemplu document HTML5</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>
```

Rezultat:

<!doctype html>
<html lang="ro">
  <head>
    <meta charset="utf-8" />
    <title>Exemplu document HTML5</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Liste

Listă ordonată

Folosește numere urmate de punct și spațiu. Numărul efectiv nu contează pentru rezultat; ordinea listei contează.

Sintaxă:

1. Primul element
2. Al doilea element
3. Al treilea element

Rezultat:

  1. Primul element
  2. Al doilea element
  3. Al treilea element

Listă neordonată

Folosește -, * sau + la începutul fiecărui rând.

Sintaxă:

- Element listă
- Alt element
- Și încă unul

Rezultat:

  • Element listă
  • Alt element
  • Și încă unul

Listă imbricată

Indentează elementele cu două sau patru spații pentru a le cuibări sub un element părinte.

Sintaxă:

- Fructe
  - Măr
  - Portocală
  - Banană
- Lapte și derivate
  - Lapte
  - Brânză

Rezultat:

  • Fructe
    • Măr
    • Portocală
    • Banană
  • Lapte și derivate
    • Lapte
    • Brânză

Formatare inline și HTML

  • Bold: **text** sau __text__
  • Italic: *text* sau _text_
  • Link: [text link](https://example.com)

Când ai nevoie de mai mult control, poți folosi HTML. Majoritatea parserelor Markdown permit HTML inline.

Exemple de sintaxă:

<abbr title="Graphics Interchange Format">GIF</abbr> este un format de imagine bitmap.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Apasă <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> pentru a încheia sesiunea.

Majoritatea <mark>salamandrelor</mark> sunt nocturne.

Rezultat:

GIF este un format de imagine bitmap.

H2O

Xn + Yn = Zn

Apasă CTRL + ALT + Delete pentru a încheia sesiunea.

Majoritatea salamandrelor sunt nocturne și vânează insecte, râme și alte creaturi mici.

Pasul următor: După ce te simți confortabil cu Markdown, încearcă Învățarea MDX pentru a adăuga componente și JavaScript în conținut.

Footnotes

  1. Citatul de mai sus este extras din prezentarea lui Rob Pike la Gopherfest, 18 noiembrie 2015. ↩