MD2HTML

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

**Inhaltsverzeichnis**
1. [Beschreibung der App](#beschreibung)
2. [Wie benutzt man diese Seite?](#benutzung)
3. [Links, Bilder und kleine Extras](#extras)
    a. [Ein Bild und einen Internetlink einfügen](#bildundlink)
    b. [Unterstützung für $\LaTeX$ Gleichungen](#latex)
    c. [Unterstützung für HTML-Code](#htmlcode)
    d. [Unterstützung für Favicons <i class="fa-regular fa-thumbs-up"></i> (in HTML) und Emoticons :+1: (in Markdown)](#emoticon)
    e. [Ein Video hinzufügen (im _iframe_)](#video)
    f. [Möglichkeit, Text (oder Code) ein- und auszuklappen](#einundausklappen)

<p id="beschreibung"></p>
## 1. Beschreibung der App

Diese HTML-Seite ermöglicht es, die Umwandlung von in _Markdown_ geschriebenem Text in Echtzeit in eine Webseite zu **visualisieren**.

>"Markdown ist eine leichte Markup-Sprache, die es erlaubt, Text einfach und intuitiv zu formatieren."
>Ein Markdown-Benutzer

Wenn man Text in Markdown im Textbereich (links) eingibt, generiert die Seite automatisch eine HTML-Version des Textes (rechts).

Es ist auch möglich, die generierte HTML-Version durch Klicken auf den "Download"-Button herunterzuladen.

<p id="benutzung"></p>
## 2. Wie benutzt man diese Seite?

So geht's:
1. Sehen Sie sich kurz an, wie man in Markdown schreibt.
2. Optional können Sie [dieses Tutorial](https://www.arthurperret.fr/tutomd/) und [diese Präsentation](https://eyssette.forge.aeif.fr/marp-slides/slides/2022-2023/markdown-fuer-alles-nutzen) ansehen
3. Löschen Sie diesen Text.
4. Schreiben Sie, was Sie möchten, an seiner Stelle.
5. Am Ende der Seite laden Sie Ihr Markdown-Dokument herunter.
6. Dann laden Sie Ihre HTML-Seite herunter.

> **Hinweis**
> Stellen Sie sicher, dass die Dateinamen, die Sie eingeben, keine Leerzeichen oder Sonderzeichen enthalten. Verwenden Sie nur Buchstaben, Zahlen und Striche (-) oder Unterstriche (_).

<p id="extras"></p>
## 3. Kleine Tutorials und Extras

<p id="bildundlink"></p>
### a. Ein Bild und einen Internetlink einfügen

Hier ist der Code, um ein Bild einzufügen:

```
![Bildname](Bild-URL)
```

Und hier ein Beispiel für das Einfügen eines Bildes.

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

Und ein Code, um einen Link einzufügen:

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

<p id="latex"></p>
### b. Unterstützung für $\LaTeX$ Gleichungen

Es ist möglich, Gleichungen inline so zu schreiben: $E=mc^2$

oder zentriert so:

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

<p id="htmlcode"></p>
### c. Unterstützung für HTML-Code

Es ist möglich, direkt in HTML auf dieser Seite zu codieren.
Zum Beispiel kann man die Seite in zwei Spalten unterschiedlicher Breite teilen oder einen klickbaren Link auf den Bildern hinzufügen wie folgt:

<div style="display: flex;">
  <div style="width: 40%; text-align: center;">
    <p>Eine erste Spalte mit einem Link zu 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>Eine zweite Spalte mit einem Link zu 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. Unterstützung für Favicons (in HTML) und Emoticons (in Markdown)

Es ist auch möglich, Favicons wie dieses hinzuzufügen: <i class="fa-solid fa-thumbs-up"></i>.
Die Liste und der Code der Favicons können [HIER](https://fontawesome.com/v6/search?o=r&m=free) gefunden werden

Aber auch Emoticons wie :smile: mit dem Code `:smile:`.
Finden Sie ihre Liste [HIER](https://gist.github.com/rxaviers/7360908)

<p id="video"></p>
### e. Ein Video hinzufügen

Man kann ein Video in einem Iframe hinzufügen (wie das untenstehende).
Der CSS-Stil ermöglicht es, dass es die volle Breite einnimmt und dabei ein Verhältnis von 16/9 behält.

Dafür muss man das Video in einem Iframe innerhalb eines Divs einfügen, wie folgt:

```
<div class="iframe-container">
    <iframe title="Vorstellung von CodiMD (und Markdown) in weniger als 2 Minuten" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/5a1256f5-a3cd-4798-84f9-3dd7b8f01aac"></iframe>
</div>
```

<p id="einundausklappen"></p>
### f. Möglichkeit, Text (oder Code) ein- und auszuklappen

>::: Ein kleiner Python-Code
>```python
>def greet(name):
>    return f"Hallo, {name}!"
>print(greet("John"))
>```