Un linguaggio di markup leggero per formattare testo in modo semplice e leggibile.

Dove si usa Markdown?

GitHub, documentazione, blog, note e molte piattaforme di scrittura tecnica.

Markdown to HTML: Sintassi Completa

Introduzione a Markdown

Markdown è un linguaggio di markup leggero creato nel 2004 da John Gruber. È diventato lo standard de facto per documentazione tecnica, README su GitHub, blog, note e piattaforme come Notion, Discord e Slack. La sua forza sta nella leggibilità del testo sorgente anche senza rendering. Questa guida copre tutta la sintassi con esempi pratici.

Sintassi Base

Titoli

# Titolo H1
## Titolo H2
### Titolo H3
#### Titolo H4
##### Titolo H5
###### Titolo H6

# Sintassi alternativa (solo H1 e H2)
Titolo H1
=========

Titolo H2
---------

Formattazione Testo

**testo grassetto** o __testo grassetto__
*testo corsivo* o _testo corsivo_
***grassetto e corsivo***
~~testo barrato~~
`codice inline`

Risultato HTML:
<strong>grassetto</strong>
<em>corsivo</em>
<del>barrato</del>
<code>codice inline</code>

Liste

# Lista non ordinata
- Elemento 1
- Elemento 2
  - Sub-elemento 2.1
  - Sub-elemento 2.2
- Elemento 3

# Alternative: * o +
* Elemento
+ Elemento

# Lista ordinata
1. Primo elemento
2. Secondo elemento
3. Terzo elemento

# I numeri non devono essere in ordine
1. Primo
1. Secondo (diventa 2)
1. Terzo (diventa 3)

# Lista con checkbox (GitHub Flavored Markdown)
- [x] Task completato
- [ ] Task da fare
- [ ] Altro task in sospeso

Link e Immagini

Link

# Link inline
[Testo del link](https://example.com)

# Link con titolo (appare al hover)
[Testo del link](https://example.com "Titolo opzionale")

# Link con riferimento (utile per link ripetuti)
[Testo del link][ref-id]

[ref-id]: https://example.com "Titolo"

# Link automatico
<https://example.com>
<email@example.com>

# Ancora interna (verso heading)
[Vai alla sezione](#nome-sezione)

# Link relativo (stesso repository)
[Vedi altro file](./docs/altro.md)

Immagini

# Immagine base
![Alt text](path/to/image.jpg)

# Immagine con titolo
![Alt text](image.jpg "Titolo immagine")

# Immagine con link (cliccabile)
[![Alt text](image.jpg)](https://example.com)

# Immagine con riferimento
![Alt text][img-id]

[img-id]: path/to/image.jpg "Titolo"

# HTML per controllo dimensioni
<img src="image.jpg" width="400" alt="Descrizione">

Blocchi di Codice

Codice Fenced

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

```python
def greet(name):
    print(f"Hello, {name}!")
    return name.upper()
```

```bash
npm install package-name
git clone https://github.com/user/repo.git
```

Linguaggi Supportati

# Linguaggi comuni per syntax highlighting
javascript, typescript, jsx, tsx
python, ruby, php, java, kotlin, go, rust
html, css, scss, json, yaml, xml
bash, shell, powershell
sql, graphql, markdown
dockerfile, nginx, apache

Diff Syntax

```diff
- riga rimossa (rossa)
+ riga aggiunta (verde)
  riga invariata
- const old = "value";
+ const new = "newValue";
```

Tabelle

| Colonna 1 | Colonna 2 | Colonna 3 |
|-----------|:---------:|----------:|
| Sinistra  | Centro    | Destra    |
| Default   | Allineato | Allineato |

# Allineamento:
:---  sinistra (default)
:---: centro
---:  destra

# Tabelle possono contenere formattazione
| Comando | Descrizione |
|---------|-------------|
| `git status` | Mostra stato repository |
| `git add .` | Stage tutti i file |

Citazioni

> Questa è una citazione.
>
> Può estendersi su più paragrafi.
> Basta continuare con >
>
> > Citazioni annidate funzionano così.

# Citazioni con formattazione
> **Nota:** Testo importante qui.
>
> Può contenere `codice` e **grassetto**.

Note GitHub

> [!NOTE]
> Informazione utile per il lettore.

> [!TIP]
> Consiglio opzionale per migliorare l'esperienza.

> [!IMPORTANT]
> Informazione cruciale da non ignorare.

> [!WARNING]
> Attenzione a questo potenziale problema.

> [!CAUTION]
> Azione potenzialmente pericolosa o irreversibile.

Elementi Avanzati

Linea Orizzontale

---
***
___

(Tutti producono <hr>)

Escape Characters

# Per mostrare caratteri speciali letteralmente
\*non corsivo\*
\`non codice\`
\[non link\]
\# non titolo

# Caratteri che richiedono escape:
\ ` * _ { } [ ] ( ) # + - . ! |

HTML Inline

# HTML è valido in Markdown
<details>
<summary>Click per espandere</summary>

Contenuto nascosto qui.

```javascript
const code = "funziona anche qui";
```

</details>

# Keyboard keys
<kbd>Ctrl</kbd> + <kbd>C</kbd> per copiare

# Subscript e superscript
H<sub>2</sub>O
x<sup>2</sup> + y<sup>2</sup>

GitHub Flavored Markdown

Autolink

# Menzioni utente
@username → link al profilo GitHub

# Issue e PR
#123 → link all'issue/PR numero 123
organization/repo#123 → cross-repo reference

# Commit SHA
abc1234 → link al commit (primi 7 caratteri)
organization/repo@abc1234 → cross-repo commit

Emoji

:smile: → 😄
:rocket: → 🚀
:warning: → ⚠️
:white_check_mark: → ✅
:x: → ❌
:bulb: → 💡
:memo: → 📝

# Lista completa: https://gist.github.com/rxaviers/7360908

Conversione HTML

Da Markdown a HTML

// JavaScript con marked
import { marked } from 'marked';
const html = marked('# Hello **World**');
// <h1>Hello <strong>World</strong></h1>

// Node.js con markdown-it
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt();
const html = md.render('# Hello **World**');

// Python con markdown
import markdown
html = markdown.markdown('# Hello **World**')

// CLI con pandoc
pandoc input.md -o output.html

Da HTML a Markdown

// JavaScript con Turndown
import TurndownService from 'turndown';
const turndown = new TurndownService();
const md = turndown.turndown('<h1>Hello</h1>');
// # Hello

// Python con html2text
import html2text
h = html2text.HTML2Text()
md = h.handle('<h1>Hello</h1>')

Best Practices README

# Nome Progetto

Breve descrizione del progetto in 1-2 frasi.

## Caratteristiche

- Feature 1
- Feature 2
- Feature 3

## Installazione

```bash
npm install nome-package
```

## Uso

```javascript
import { funzione } from 'nome-package';
funzione();
```

## API

| Metodo | Parametri | Ritorno | Descrizione |
|--------|-----------|---------|-------------|
| `fn()` | `string`  | `void`  | Fa qualcosa |

## Contribuire

1. Fork il repository
2. Crea un branch (`git checkout -b feature/AmazingFeature`)
3. Commit i cambiamenti (`git commit -m 'Add AmazingFeature'`)
4. Push al branch (`git push origin feature/AmazingFeature`)
5. Apri una Pull Request

## Licenza

MIT

Strumenti Correlati

Per lavorare con Markdown:

Markdown Converter - Converti MD ↔ HTML
Diff Checker - Confronta versioni
JSON Formatter - Formatta JSON nei code block

Editor Markdown

VS Code: Preview integrata con Ctrl+Shift+V
Typora: WYSIWYG markdown editor
Obsidian: Knowledge management con linking
Notion: Collaborazione e docs team
StackEdit: Editor online con sync

Conclusione

Markdown è semplice ma potente. Punti chiave:

Sintassi intuitiva e leggibile anche raw
Supportato ovunque (GitHub, GitLab, Notion, etc.)
Facilmente convertibile in HTML
Perfetto per documentazione tecnica
Estensibile con GitHub Flavored Markdown

Per altri strumenti utili, esplora i nostri tool online gratuiti. Per la specifica completa, consulta CommonMark Spec e GitHub Flavored Markdown.