MD2HTML

# <img src="https://ciaconelli.forge.aeif.fr/md2html/MD2HTML-logoSVG.svg" style="box-shadow: none;"> Convertir código Markdown en página HTML

**Tabla de contenidos**
1. [Descripción de la aplicación](#descripcion)
2. [Cómo utilizar esta página](#utilizacion)
3. [Enlaces, imágenes y trucos adicionales](#trucosenplus)
    a. [Insertar una imagen y un enlace web](#imagenyenlace)
    b. [Soporte para ecuaciones $\LaTeX$](#latex)
    c. [Soporte para código HTML](#codigohtml)
    d. [Soporte para favicons <i class="fa-regular fa-thumbs-up"></i> (en HTML) y emoticonos :+1: (en Markdown)](#emoticon)
    e. [Agregar un video (en _iframe_)](#video)
    f. [Posibilidad de expandir/contraer texto (o código)](#deplie_replie)

<p id="descripcion"></p>
## 1. Descripción de la aplicación

Esta página HTML permite **visualizar** en tiempo real la transformación de texto escrito en _Markdown_ en una página web.

>"Markdown es un lenguaje de marcado ligero que permite formatear texto de manera simple e intuitiva."
>Un usuario de Markdown

Al escribir texto en Markdown en el área de texto (a la izquierda), la página generará automáticamente una versión HTML del texto (a la derecha).

También es posible descargar la versión HTML generada mediante el botón "Descargar".

<p id="utilizacion"></p>
## 2. Cómo utilizar esta página

Aquí te explicamos cómo hacerlo:
1. Revisa brevemente cómo escribir en Markdown.
2. Opcionalmente, consulta [este tutorial](https://www.arthurperret.fr/tutomd/) y [esta presentación](https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/utilizar-el-markdown-para-todo)
3. Borra este texto.
4. Escribe lo que quieras en su lugar.
5. Al final de la página, descarga tu documento Markdown.
6. Luego, descarga tu página HTML.

> **Nota**
> Asegúrate de que los nombres de archivo que ingreses no contengan espacios ni caracteres especiales. Utiliza solo letras, números, guiones (-) o guiones bajos (_).

<p id="trucosenplus"></p>
## 3. Tutoriales y trucos adicionales

<p id="imagenyenlace"></p>
### a. Insertar una imagen y un enlace web

Este es el código para insertar una imagen:

```
![Nombre de la imagen](URL de la imagen)
```
Y aquí un ejemplo de inserción de imagen.

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

Y el código para insertar un enlace:

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

<p id="latex"></p>
### b. Soporte para ecuaciones en $\LaTeX$

Es posible escribir ecuaciones en línea así: $E=mc^2$

O centradas de esta manera:

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

<p id="codigohtml"></p>
### c. Soporte para código HTML

Es posible codificar directamente en HTML en esta página.
Por ejemplo, puedes dividir la página en dos columnas de diferentes anchuras o añadir un enlace clickeable en las imágenes de esta manera:

<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Una primera columna con un enlace a 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>Una segunda columna con un enlace a 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 este código:
```
<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Una primera columna con un enlace a 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>Una segunda columna con un enlace a 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. Soporte para fontawesomes (en HTML) y emoticones (en Markdown)

Es posible agregar favicons como este: <i class="fa-solid fa-thumbs-up"></i>.
La lista y el código de los favicons se pueden encontrar [AQUÍ](https://fontawesome.com/v6/search?o=r&m=free)

Pero también emoticones como :smile: usando el código `:smile:`.
Encuentra su lista [AQUÍ](https://gist.github.com/rxaviers/7360908)

<p id="video"></p>
### e. Agregar un video

Se puede agregar un video en iframe (como el siguiente).
El estilo CSS permite que ocupe el ancho completo manteniendo una proporción de 16/9.

Para hacerlo, simplemente inserta el video en un iframe dentro de un div siguiendo este código:

```
<div class="iframe-container">
    <iframe title="Presentación de CodiMD (y del código Markdown) en menos de 2 minutos" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac"></iframe>
</div>
```

<p id="deplie_replie"></p>
### f. Posibilidad de expandir/contraer texto (o código)

>::: Un pequeño código Python
>```python
>def greet(name):
>    return f"Hola, {name}!"
>print(greet("John"))
>```