MD2HTML

# <img src="https://lmdbt.forge.apps.education.fr/md2html/MD2HTML-logoSVG.svg" style="box-shadow: none;"> Convertir du code Markdown en page HTML

**Table des matières**
1. [Description de l'appli](#description)
1. [Comment utiliser cette page ?](#utilisation)
3. [Liens, images et petits trucs en plus](#trucsenplus)
	a. [Insérer une image et un lien internet](#imageetlien)
	b. [Une prise en charge des équations $\LaTeX$](#latex)
	c. [Une prise en charge du code HTML](#codehtml) 
	d. [Une prise en charge des favicons <i class="fa-regular fa-thumbs-up"></i> (en HTML) et des émoticones :+1: (en Markdown)](#emoticon)
	e. [Ajouter une vidéo (en _iframe_)](#video)
	f. [Possibilité de déplier/replier du texte (ou du code)](#deplie_replie)

<p id="description"></p>
## 1. Description de l'appli

Cette page HTML permet de **visualiser** en temps réel la transformation d'un texte écrit en _Markdown_ en une page web.

>«Le Markdown est un langage de balisage léger qui permet de mettre en forme du texte de manière simple et intuitive.»
>Un utilisateur de Markdown

Lorsque l'on tape du texte en Markdown dans la zone de texte (à gauche), la page générera automatiquement une version HTML du texte (à droite).

Il est également possible de télécharger la version HTML générée grâce au bouton "Télécharger".

<p id="utilisation"></p>
## 2. Comment utiliser cette page ?

Voici comment faire :
1. Regardez rapidement comment écrire en Markdown.
1. Éventuellement, allez voir [ce tutoriel](https://www.arthurperret.fr/tutomd/) et [cette présentation](https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/utiliser-le-markdown-pour-tout-faire)
1. Effacez ce texte
1. Écrivez ce que vous voulez à la place
1. En bas de page, télécharger votre document Markdown
1. Puis télécharger votre page HTML.

> **Remarque**
> Assurez-vous que les noms de fichiers que vous entrez ne contiennent pas d'espaces ou de caractères spéciaux. Utilisez uniquement des lettres, des chiffres et des tirets (-) ou des underscores (_).

<p id="trucsenplus"></p>
## 3. Petits tutos et petits trucs en plus

<p id="imageetlien"></p>
### a. Insérer une image et un lien internet

Voici le code pour insérer une image :

```
![Nom de l image](URL de l image)
```
Et voici un exemple d'insertion d'image.

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

Et un code pour insérer un lien :

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

<p id="latex"></p>
### b. Une prise en charge des équations en $\LaTeX$

Il est possible d'écrire les équations en ligne ainsi : $E=mc^2$

ou centrée ainsi :

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

<p id="codehtml"></p>
### c. Une prise en charge du code HTML

Il est possible de coder directement en HTML dans cette page.
Par exemple, on peut diviser la page en deux colonnes de largeurs différentes ou encore ajouter un lien cliquable sur les images comme ceci :

<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Une première colonne avec un lien vers 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>Une deuxième colonne avec un lien vers 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>

Avec ce code :
```
<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Une première colonne avec un lien vers 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>Une deuxième colonne avec un lien vers 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>
```

<p id="emoticon"></p>
### d. Une prise en charge des fontawesomes (en HTML) et des émoticones (en Markdown)

Il est aussi possible d'ajouter des favicons comme celui-ci : <i class="fa-solid fa-thumbs-up"></i>.
La liste et le code des favicons sont à retrouver [ICI](https://fontawesome.com/v6/search?o=r&m=free)

Mais aussi des émoticones tel que : :smile: grâce au code `:smile:`. 
Retrouvez leur liste [ICI](https://gist.github.com/rxaviers/7360908)

<p id="video"></p>
### e. Ajouter une vidéo

On peut ajouter une vidéo en iframe (comme celle ci-dessous).
Le style CSS permet qu'elle prenne la pleine largeur en gardant un ratio 16/9.

Pour cela, il suffit d'insérer la vidéo dans un iframe lui même dans une div en suivant ce code :

```
<div class="iframe-container">
    <iframe title="Présentation de CodiMD (et du code Markdown) en moins de 2 minutes" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac"></iframe>
</div>
```
<p id="deplie_replie"></p>
### f. Possibilité de déplier/replier du texte (ou du code)

>::: Un petit code Python
>```python
>def greet(name):
>	return f"Bonjour, {name} !"
>print(greet("John"))
>```

Convertissez rapidement un code Markdown en une page HTML esthétique !

Plus d'info sur cette appli ici :