Foglio di aiuto Markdown
Markdown è un insieme di convenzioni per scrivere testo formattato in un file semplice, e il suo fascino sta nel fatto che il sorgente rimane leggibile anche quando nulla lo renderizza. La sintassi sottostante è raggruppata per ciò che stai cercando di fare, e ogni riga mostra l'HTML che effettivamente produce.
Questi frammenti HTML non sono digitati a mano. Ognuno è l'output reale del convertitore Markdown di questo sito, confrontato con la tabella dalla suite di test ad ogni compilazione — quindi se una riga e lo strumento mai discordassero, la compilazione fallirebbe piuttosto che indurre la pagina in inganno.
Il dialetto è CommonMark più le estensioni GitHub che sono quasi universali: tabelle, elenchi di attività e sbarramento. Le note a piè di pagina, gli elenchi di definizioni e le direttive sono deliberatamente assenti, perché documentare una sintassi che poi non fa nulla nel convertitore a un clic di distanza è peggio che ometterla.
Enfasi e codice in linea
9La sintassi in linea funziona all'interno di paragrafi, titoli, elementi di elenco e celle di tabella allo stesso modo.
| Sintassi | Che cosa fa | HTML prodotto |
|---|---|---|
| *italic* | Corsivo | <p><em>italic</em></p> |
| _italic_ | Corsivo, forma alternativaIgnorato all'interno di una parola, quindi snake_case sopravvive. | <p><em>italic</em></p> |
| **bold** | Grassetto | <p><strong>bold</strong></p> |
| __bold__ | Grassetto, forma alternativa | <p><strong>bold</strong></p> |
| ***both*** | Grassetto e corsivo insieme | <p><em><strong>both</strong></em></p> |
| ~~gone~~ | Barrato | <p><del>gone</del></p> |
| `code` | Codice in linea — nulla all'interno viene interpretato | <p><code>code</code></p> |
| ``a ` b`` | Codice in linea che contiene un backtickUsa più backtick al di fuori di quelli che appaiono all'interno. | <p><code>a ` b</code></p> |
| \*not italic\* | Un asterisco letterale invece di enfasi | <p>*not italic*</p> |
Titoli
7La forma hash è quella da usare; la forma sottolineatura raggiunge solo due livelli.
| Sintassi | Che cosa fa | HTML prodotto |
|---|---|---|
| # Heading | Titolo di livello 1 | <h1>Heading</h1> |
| ## Heading | Titolo di livello 2 | <h2>Heading</h2> |
| ### Heading | Titolo di livello 3 | <h3>Heading</h3> |
| ###### Heading | Titolo di livello 6 — il più profondo che c'è | <h6>Heading</h6> |
| Heading ======= | Titolo di livello 1, forma sottolineata | <h1>Heading</h1> |
| Heading ------- | Titolo di livello 2, forma sottolineata | <h2>Heading</h2> |
| ## Heading ## | I hash finali sono decorazione e vengono eliminatiIl conteggio sulla destra viene ignorato; solo quello a sinistra imposta il livello. | <h2>Heading</h2> |
Elenchi
7Indenta di due spazi da annidare. Una riga vuota tra gli elementi rende ognuno un paragrafo.
| Sintassi | Che cosa fa | HTML prodotto |
|---|---|---|
| - one - two | Elenco puntato | <ul> <li>one</li> <li>two</li> </ul> |
| * one * two | Elenco puntato, marcatore alternativo | <ul> <li>one</li> <li>two</li> </ul> |
| 1. one 2. two | Elenco numerato | <ol> <li>one</li> <li>two</li> </ol> |
| 1. one 1. two | Anche un elenco numerato, rinumerato al renderingSolo il primo numero viene utilizzato; il resto può essere tutto 1. | <ol> <li>one</li> <li>two</li> </ol> |
| - one - nested | Elenco annidato — indenta il figlio di due spazi | <ul> <li>one <ul> <li>nested</li> </ul></li> </ul> |
| - [ ] todo | Elemento di elenco di attività non controllato | <ul> <li><input type="checkbox" disabled /> todo</li> </ul> |
| - [x] done | Elemento di elenco di attività controllato | <ul> <li><input type="checkbox" checked disabled /> done</li> </ul> |
Link e immagini
6| Sintassi | Che cosa fa | HTML prodotto |
|---|---|---|
| [text](https://a.co) | Link | <p><a href="https://a.co">text</a></p> |
| [text](https://a.co "Tip") | Link con un titolo tooltip | <p><a href="https://a.co" title="Tip">text</a></p> |
| <https://a.co> | URL nudo trasformato in un link | <p><a href="https://a.co">https://a.co</a></p> |
| [mail](mailto:[email protected]) | Link e-mail | <p><a href="mailto:[email protected]">mail</a></p> |
|  | Immagine, con testo alternativo | <p><img src="cat.png" alt="alt" /></p> |
| [x](javascript:alert(1)) | Schema non sicuro — il link viene eliminato, il testo rimanejavascript:, data: e vbscript: gli URL perdono il loro href. | <p>x</p> |
Elementi a blocco
9Ognuno di questi deve iniziare all'inizio di una riga.
| Sintassi | Che cosa fa | HTML prodotto |
|---|---|---|
| > quoted | Blockquote | <blockquote> <p>quoted</p> </blockquote> |
| > > deeper | Blockquote annidato | <blockquote> <blockquote> <p>deeper</p> </blockquote> </blockquote> |
| ``` code ``` | Blocco di codice recintato | <pre><code>code </code></pre> |
| ```js let a = 1; ``` | Blocco di codice recintato con una classe di lingua per l'evidenziazione | <pre><code class="language-js">let a = 1; </code></pre> |
| code | Blocco di codice da quattro spazi di indentazione | <pre><code>code </code></pre> |
| --- | Riga orizzontale | <hr /> |
| *** | Riga orizzontale, forma alternativa | <hr /> |
| one two | Interruzione di riga all'interno di un paragrafoDue spazi finali. Invisibile nella maggior parte degli editor, ecco perché così spesso fallisce. | <p>one<br /> two</p> |
| one two | Una riga vuota separa i paragrafi | <p>one</p> <p>two</p> |
Tabelle
4La riga del delimitatore è ciò che la rende una tabella. L'allineamento è impostato da due punti in quella riga.
| Sintassi | Che cosa fa | HTML prodotto |
|---|---|---|
| | a | b | | - | - | | 1 | 2 | | Tabella — intestazione, riga del delimitatore, quindi righe del corpo | |
| | :--- | | Allinea a sinistra la colonna, nella riga del delimitatore | |
| | :---: | | Centra la colonna | |
| | ---: | | Allinea a destra la colonna |