MD2HTML

# <img src="https://ciaconelli.forge.aeif.fr/md2html/MD2HTML-logoSVG.svg" style="box-shadow: none;"> Convert Markdown Code into HTML Page

**Table of Contents**
1. [App Description](#description)
2. [How to Use This Page?](#usage)
3. [Links, Images, and Extra Tips](#extratips)
    a. [Inserting an Image and a Web Link](#imageandlink)
    b. [Support for $\LaTeX$ Equations](#latex)
    c. [Support for HTML Code](#htmlcode) 
    d. [Support for Favicons <i class="fa-regular fa-thumbs-up"></i> (in HTML) and Emoticons :+1: (in Markdown)](#emoticon)
    e. [Adding a Video (in _iframe_)](#video)
    f. [Ability to Expand/Collapse Text (or Code)](#expand_collapse)

<p id="description"></p>
## 1. App Description

This HTML page allows you to **visualize** in real time the transformation of text written in _Markdown_ into a web page.

>"Markdown is a lightweight markup language that allows you to format text in a simple and intuitive way."
>A Markdown User

When you type text in Markdown in the text area (on the left), the page will automatically generate an HTML version of the text (on the right).

It is also possible to download the generated HTML version by clicking the "Download" button.

<p id="usage"></p>
## 2. How to Use This Page?

Here's how to do it:
1. Quickly look at how to write in Markdown.
2. Optionally, check out [this tutorial](https://www.arthurperret.fr/tutomd/) and [this presentation](https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/utilizing-markdown-for-everything)
3. Delete this text.
4. Write whatever you want in its place.
5. At the bottom of the page, download your Markdown document.
6. Then download your HTML page.

> **Note**
> Make sure the file names you enter do not contain spaces or special characters. Use only letters, numbers, dashes (-), or underscores (_).

<p id="extratips"></p>
## 3. Extra Tutorials and Tips

<p id="imageandlink"></p>
### a. Inserting an Image and a Web Link

Here is the code to insert an image:

```
![Image Name](Image URL)
```
And here is an example of inserting an image.

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

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

And a code to insert a link:

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

```
[Text](URL Link)
```

<p id="latex"></p>
### b. Support for $\LaTeX$ Equations

It's possible to write inline equations like this: $E=mc^2$

or centered like this:

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

<p id="htmlcode"></p>
### c. Support for HTML Code

You can directly code in HTML on this page.
For example, you can split the page into two columns of different widths or add a clickable link on images like this:

<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>A first column with a link to 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>A second column with a link to 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>

```
<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>A first column with a link to 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>A second column with a link to 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. Support for Favicons (in HTML) and Emoticons (in Markdown)

It is also possible to add favicons like this one: <i class="fa-solid fa-thumbs-up"></i>.
The list and code for favicons can be found [HERE](https://fontawesome.com/v6/search?o=r&m=free)

But also emoticons like :smile: with the code `:smile:`.
Find their list [HERE](https://gist.github.com/rxaviers/7360908)

<p id="video"></p>
### e. Adding a Video

You can add a video in an iframe (like the one below).
The CSS style ensures that it takes up the full width while maintaining a 16/9 ratio.

For this, simply insert the video in an iframe inside a div following this 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="expand_collapse"></p>
### f. Ability to Expand/Collapse Text (or Code)

>::: A small Python code
>```python
>def greet(name):
>    return f"Hello, {name}!"
>print(greet("John"))
>```