Cheatsheet Markdown

Guida di riferimento completa per la sintassi Markdown

Basato sulla specifica GitHub Flavored Markdown (GFM) e CommonMark

Sintassi di Base

Elementi fondamentali del Markdown originale

Intestazioni (Stile ATX)

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

Intestazioni (Stile Setext)

Sintassi
Heading 1
=========

Heading 2
---------
Risultato
Heading 1Heading 2

Enfasi e Formattazione

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

Codice Inline

`code`→code
``code with `backtick` ``→code with `backtick`
Suggerimento
Usa backtick doppi quando il tuo codice contiene backtick singoli.

Blocchi di Codice (Fenced Code Blocks)

Sintassi
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
Risultato
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
Linguaggi supportati per l'evidenziazione della sintassi
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

Link

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
Link di riferimento
[text][ref]

[ref]: https://example.com "Title"

Immagini

Sintassi
![Alt text](url)
Con titolo
![Alt text](url "Title")
Immagine con link
[![Alt](image.jpg)](link)
Riferimento
![Alt][ref]

[ref]: url "Title"

Elenchi Non Ordinati

Sintassi
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
Risultato
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

Elenchi Ordinati

Sintassi
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
Risultato
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

Citazioni (Blockquotes)

Sintassi
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
Risultato
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

Linee Orizzontali

Sintassi
---

***

___
Risultato

Estensioni GFM

Funzionalità aggiuntive di GitHub Flavored Markdown

Tabelle

Sintassi
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

Allineamento:
:--- sinistra
:---: centro
---: destra
Risultato
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

Liste di Attività

Sintassi
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
Risultato
  • Completed task
  • Another done task
  • Pending task
  • Another pending

Autolink

URL ed email sono collegati automaticamente
www.example.com
https://example.com
[email protected]
Risultato

Avvisi/Callout (GitHub)

Sintassi
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
Risultato
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

Sintassi Estesa

Funzionalità avanzate supportate da alcuni parser

Note a Piè di Pagina

Sintassi
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
Risultato

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

Liste di Definizioni

Sintassi
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
Risultato
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

Testo Evidenziato

==highlighted text==→highlighted text
Nota
Supportato da alcuni parser come Obsidian, Notion e altri.

Pedice e Apice

H~2~O→H2O
X^2^→X2
Alternativa HTML
H<sub>2</sub>O
X<sup>2</sup>

Emoji

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
Riferimento completo
Lista completa dei codici emoji

Abbreviazioni

Sintassi
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
Risultato
HTML is widely used on the web.

Formule Matematiche (LaTeX)

Inline
The formula $E = mc^2$ is famous.
Risultato
The formula E = mc² is famous.
Blocco
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
Risultato
n!k!(n-k)! = (nk)

HTML ed Elementi Speciali

Uso di HTML inline e caratteri speciali

HTML Inline

Elementi supportati
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
Risultato
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

Escape dei Caratteri

Usa \ prima dei caratteri speciali
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
Caratteri che possono essere escaped
\ ` * _ { } [ ] ( ) # + - . ! |

Interruzioni di Riga

Metodi
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

Entità HTML

&copy;→©
&reg;→®
&trade;→™
&nbsp;→(spazio non separabile)
&lt; &gt;→< >
&amp;→&

Funzionalità Avanzate di GitHub

Funzionalità specifiche di GitHub Flavored Markdown

Diagrammi Mermaid

Diagramma di flusso
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
Risultato
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
Grafico a torta
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
Diagramma di sequenza
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
Tipi di diagrammi supportati
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

Tasti della Tastiera (kbd)

Sintassi
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
Risultato
Ctrl + C
Cmd + Shift + P
Enter ↵

Elementi Comprimibili

Sintassi
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
Risultato
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

Menzioni e Riferimenti

Menzioni utenti
@username
@organization/team
Riferimenti a Issue e PR
#123
GH-123
username/repo#123
organization/repo#123
Risultato
@username — menziona un utente
#123 — riferisce issue/PR #123
repo#456 — riferisce in altro repository

Modelli di Colore

Sintassi
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
Risultato
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

Commenti

Sintassi
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
Risultato
(I commenti sono invisibili nel documento renderizzato)

SHA dei Commit

Sintassi
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
Risultato
a1b2c3d — link al commit
repo@a1b2c3d — commit in altro repository

Codice con Diff

Sintassi
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
Risultato
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

Ancore e Link Interni

Creazione di un'ancora
<a name="section"></a>
## My Section
Collegamento a un'ancora
[Go to section](#section)
[Back to top](#top)
Risultato
Go to section|Back to top ⬆️

Immagini con Dimensioni

Usando HTML
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
Suggerimento
Usa HTML quando devi controllare dimensioni o allineamento delle immagini.

Indice dei Contenuti

Sintassi
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
Risultato
Table of Contents

Badge/Shield

Sintassi
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
Risultato
build: passingversion: 1.0.0license: MITdocs: latest

Allineamento del Testo

Sintassi
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
Risultato
Centered text
Right-aligned text
Centered bold

Strumenti e Risorse

Link utili per lavorare con Markdown

Riferimenti e Risorse