MD2HTML

# <img src="https://ciaconelli.forge.aeif.fr/md2html/MD2HTML-logoSVG.svg" style="box-shadow: none;"> Convertire del codice Markdown in pagina HTML

***
Grazie mille a [@nilocram](https://piaille.fr/@nilocram@framapiaf.org) per la traduzione in italiano. :it::wink:
***

**Indice**
1. [Descrizione dell'app](#description)
1. [Come usare questa pagina?](#utilisation)
3. [Link,immagini e qualche trucchetto in più](#trucsenplus)
	a. [Inserire un'immagine e un link web](#imageetlien)
	b. [Supporto per le equazioni $\LaTeX$](#latex)
	c. [Supporto per il codice HTML](#codehtml) 
	d. [Supporto per favicons <i class="fa-regular fa-thumbs-up"></i> (in HTML) e delle emoticons :+1: (in Markdown)](#emoticon)
	e. [Inserimento di un video (in _iframe_)](#video)
	f. [Possibilità di dispiegare/ripiegare del testo (o del codice)](#deplie_replie)

## 1. Descrizione dell'app

Questa pagina HTML permette di **visualizzare** in tempo reale la trasformazione di un testo scritto in _Markdown_ in una pagina web.

>«Il Markdown è un linguaggio di marcatura leggero che rende la formattazione del testo semplice e intuitiva».
>Un utente di Markdown.

Quando si digita un testo Markdown nella zona di testo (a sinistra), la pagina genera automaticamente una versione HTML del testo (a destra).

È anche possibile scaricare la versione HTML generata utilizzando il pulsante "Download".

## 2. Come usare questa pagina?

Ecco come fare:
1. Date una rapida occhiata a come scrivere in Markdown.
1. Potete anche dare un'occhiata a [questo tutorial](https://commonmark.org/help/) e a [questa presentazione](https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/utiliser-le-markdown-pour-tout-faire)
1. Cancellate questo testo
1. Scrivete invece quello che volete
1. Nella parte inferiore della pagina, scaricate il documento Markdown
1. Quindi scaricate la pagina HTML..

> **Nota**
> Assicuratevi che i nomi dei file inseriti non contengano spazi o caratteri speciali. Utilizzate solo lettere, numeri e trattini (-) o underscore (_).

## 3. Brevi tutorial e anche qualche trucchetto

### a. Inserire un'immagine e un link web

Ecco il codice per inserire un'immagine:

```
![Nome dell'immagine](URL dell'immagine)
```
Ed ecco un esempio di inserimento dell'immagine.

![Logo LMDBT](https://www.lmdbt.fr/Logo250px.png)

E un codice per inserire un link:

```
[Testo](Link URL)
```
[Les Maths Débat Tôt](https://www.lmdbt.fr)

### b. Supporto per le equazioni in $\LaTeX$

È possibIle scrivere le equazioni on line così: $E=mc^2$

o centrate così:

$$R_{\mu{}\nu{}} - \frac{1}{2}g_{\mu{}\nu{}} + \Lambda{}g_{\mu{}\nu{}}=\kappa{}T_{g_{\mu{}\nu{}}}$$

### c. Supporto per il codice HTML

Questa pagina può essere codificata direttamente in HTML.
Ad esempio, è possibile dividere la pagina in due colonne di larghezza diversa o aggiungere alle immagini un link cliccabile come questo:

<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Una colonna con un link verso Framasoft.</p>
    <a href="https://framasoft.org/">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Framasoft_Logo.svg/480px-Framasoft_Logo.svg.png" style="max-width: 75%;" />
    </a>
  </div>
  <div style="width: 60%; text-align: center;">
    <p>Un'altra colonna con un link verso Apps.education.</p>
    <a href="https://apps.education.fr/">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Apps.education.fr_logo.svg/486px-Apps.education.fr_logo.svg.png" style="max-width: 75%;" />
    </a>
  </div>
</div>

Con questo codice:
```
<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Una colonna con un link verso Framasoft.</p>
    <a href="https://framasoft.org/">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Framasoft_Logo.svg/480px-Framasoft_Logo.svg.png" style="max-width: 75%;" />
    </a>
  </div>
  <div style="width: 60%; text-align: center;">
    <p>Un'altra colonna con un link verso Apps.education.</p>
    <a href="https://apps.education.fr/">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Apps.education.fr_logo.svg/486px-Apps.education.fr_logo.svg.png" style="max-width: 75%;" />
    </a>
  </div>
</div>
```

### d. Un supporto ai fontawesome (in HTML) e alle emoticon (in Markdown)

È possibile anche inserire dei favicons come questo : <i class="fa-solid fa-thumbs-up"></i>.
L'elenco e il codice dei favicon si possono trovare [QUI](https://fontawesome.com/v6/search?o=r&m=free)

Ma anche delle emoticon come: :smile: grazie al codice `:smile:`. 
Trovate il loro elenco [QUI](https://gist.github.com/rxaviers/7360908)

### e. Inserimento di un video

Si può inserire un video in un iframe (come quello qui sotto).
Lo stile CSS gli consente di occupare l'intera larghezza mantenendo il rapporto 16/9.

Per farlo, è sufficiente inserire il video in un iframe, a sua volta contenuto in un div, utilizzando questo codice :

```
<div class="iframe-container">
    <iframe title="Presentazione di CodiMD (e del codice Markdown) in meno di 2 minuti" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac"></iframe>
</div>
```
<p id="deplie_replie"></p>

### f. Possibilità di dispiegare/ripiegare del testo (o del codice)

>::: Un pezzetto di codice Python
>```python
>def greet(name):
>	return f"Buongiorno, {name} !"
>print(greet("John"))
>```