Cover Image

Markdown
Erstellt: Oktober 11, 2024   |   Änderung: Oktober 18, 2025  |   Kategorien: Bludit-Blog

Hier ist eine Liste der Funktionen, die mit Bludit bzw. dem EasyMDE-Editor möglich sind.
Was ist Markdown? Markdown ist eine Vereinfachung von HTML. Dadurch lassen sich Texte schneller schreiben und Formatierungen sowie Tags leichter einbetten.
Anstatt also <.h1>Überschrift<./h1> zu schreiben, reicht im Markdown # Überschrift oder ## Überschrift für eine h2-Überschrift. Im Hintergrund werden die Formatierungen umgewandelt, sodass es für den Betrachter keinen Unterschied macht, der Schreiber spart sich aber einiges an Zeit.

Inhaltsverzeichnis:


Überschriften

# Überschrift h1
## Überschrift h2
### Überschrift h3
#### Überschrift h4
##### Überschrift h5
###### Überschrift h6

Ergebnis:

Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4

Überschrift h5
Überschrift h6

Die Größe der Überschriften lassen sich in der style.css einstellen, wenn nicht vorhanden, einfach folgendes einfügen. Statt % könnte man auch px benutzen.

h1 {
    font-size: 200%;
}
h2 {
    font-size: 150%;
}
h3 {
    font-size: 110%;
}
h4 {
    font-size: 100%;
}
h5 {
    font-size: 80%;
}
h6 {
    font-size: 60%;
}


Schrift Formatierung

**Fett**  
__Fett__  
*Kursiv*  
_Kursiv_ 
***Fett & Kursiv***
~~Durchgestrichen~~

Ergebnis:

Fett
Fett
Kursiv
Kursiv
Fett & Kursiv
Durchgestrichen

Wie man sieht, gibt es für bestimmte Dinge mehrere Möglichkeiten der Benutzung. Da kann jeder selbst entscheiden, was ihm besser gefällt.


Liste / Aufzählung

- Punkt 1 Strich
- Punkt 2 Strich
* Punkt 3a Stern
+ Punkt 4a Plus

1. Erstens
2. Zweitens
3. Drittens
5. fünftens
1. erstens
2.1 ...

Ergebnis:

  • Punkt 1 Strich
  • Punkt 2 Strich
  • Punkt 3a Stern
  • Punkt 4a Plus
  1. Erstens
  2. Zweitens
  3. Drittens
  4. fünftens
  5. erstens 2.1 ...

Auch hierbei gibt es viele Möglichkeiten, die alle das Gleiche zeigen. Das Schöne ist: Wenn man eine neue Zeile anfängt, führt er die benutzte Auflistung automatisch weiter. Das funktioniert auch mit Zahlen: Der EasyMDE führt diese fort, selbst wenn man im Nachhinein die Reihenfolge der Zahlen ändert.


Verschachtelte Aufzählungen

1. Punkt 1
2. Punkt 2
    - Unterpunkt 1A
        - Unterpunkt 2
                - Unterunterpunkt 1
                * Unterunterpunkt 2
                + Unterunterpunkt 3
                    - Unterunterpunkt 4
 - Unterpunkt 1B

> 1. Punkt A
> 2. Punkt B
>    3. Unterpunkt C
>        4. Unterpunkt D
>                5. Unterpunkt E

Ergebnis:

  1. Punkt 1
  2. Punkt 2
    • Unterpunkt 1A
      • Unterpunkt 2
        • Unterunterpunkt 1
        • Unterunterpunkt 2
        • Unterunterpunkt 3
          • Unterunterpunkt 4
      • Unterpunkt 1B
  3. Punkt 3
    • Unterpunkt 3A
  1. Punkt A
  2. Punkt B
    1. Unterpunkt C
      1. Unterpunkt D
        1. Unterpunkt E


Absätze

Das ist die erste Zeile. ↵
Das ist die zweite Zeile. ↵
Und das die Dritte. ↵
↵
↵
Das ist die erste Zeile.⥎ ⥎  ↵
Das ist die zweite Zeile.⥎ ⥎  ↵
↵
<.br>
Und das die Dritte.⥎ ⥎  ↵

Ergebnis:

Das ist die erste Zeile. Das ist die zweite Zeile. Und das die Dritte.

Das ist die erste Zeile.
Das ist die zweite Zeile.


Und das die Dritte.

Wenn man wie bei den ersten drei Zeilen diese einfach durch ein ↵ trennt, reihen sie sich hintereinander weg. Setzt man an jedem Ende des Satzes mindestens zwei ⥎ ⥎ werden die Zeilen "soft" getrennt.
Fügt man mit Enter einfach eine Leerzeile wird diese bebehalten. Was nicht funktioniert ist mehrere Leerzeichen zu setzen. Möchte man mehrere Leerzeilen haben muss dann noch ein <br> eingefügt werden bzw. mehrere.


Verlinkungen

[Ein einfacher Link](https://#)

![Link zu einem Bild](/smilieX.png)

[![Link zu einem Bild mit http Link](/smilieX.png)](https://#)

Ergebnis:

Ein einfacher Link

Link zu einem Bild

Link zu einem Bild mit http Link

Die Verlinkung in diesem Markdown ist mir leider zu simpel. Es fehlt mir dabei, dass man die Größe der Bilder ändern kann und dass sich die Links in einem neuen Tab öffnen. Deshalb greife ich bei Verweisen auf HTML zurück. Hier ein paar Beispiele:

<a href="https://beispiel.de" target="_blank">Link Text</a>

<img src="/smilieX.png" alt="Smilie" width="50" height="50">

<div style="text-align:center;">
  <img src="/smilieX.png" alt="Smilie" width="50" height="50">
</div>

<img src="/smilieX.png" alt="Smilie" width="50" style="display:block;margin:0 auto;">

<a href="https://beispiel.de" target="_blank">
  <img src="/smilieX.png" alt="Smilie" width="50">
</a>

Ergebnis:

Link Text

Smilie
Smilie
Smilie

Smilie


Seitenanker

[Anker1](#anker1)

Ergebnis:

Anker1

So wie das hier steht ist es nur die halbe Wahrheit, denn in diesem EasyMDE funktionieren das Markdown und die Seitenanker nicht ganz so, wie sie sollten. Eigendlich würde man den Startanker mit [Anker1](#anker1)schreiben und das passende Gegstück wäre {#anker1} . Mit Hilfe aus einer Kombination aus Markdown und HTML lässt sich das Problem aber gut lösen, in dem man beim Gegenstück <a name="anker1"></a> benutzt. Am deutlichsten wird das wenn ich hier den wahren inhalt der Seite zeige.

<a name="anker1"></a>Seitenanker [Anker2](#anker2)

Auch befindet sich dort wieder ein Startanker [Anker2](#anker2) der wieder zu diesem Teil des Beitrags führt. Hier nochmal zu sehen, wieder dieses Teil hinter den Fassaden aussieht. Für die Suche statt Steitenmarker kann man auch Sprungmaker sagen.

<br>
<a name="syntax6"></a> <a name="anker2"></a>
## Seitenanker
......

Man kann mit dem Sprungmarker auch in andere Seiten hineinspringen. Vorraussetzt die verlinkte Seite hat den Sprungmaker, wie in folgenden Beispiel < a href="https://blog.t0by.de/unter-der-motorhaube#Sprung1" target="_blank">Beispiel</a>, wichtig ist, immer auf Groß- und Kleinschreibung zu achten. Beispiel: Benutze Plugins:

Noch ein Hinweis, es kann passieren, dass die Stelle an die man springen möchte, z.B. eine Überschrift, von dem Header der Seite verdeckt wird. Das liegt dann daran, dass der Header Bereich position:fixed ist, wenn er relative, absolute, static ist sollte das gehen. Ansonsten kann man das Problem auch mit CSS lösen. Mehr dazu in den Fußnoten.


Fußnoten

Startnote:

An dieser Stelle<sup>[A](#A)</sup> könnte der Hinweis zu einem Link bzw. einer Fußnote stehen.
Oder zu diesem wichtigen Wort<sup>[B](#B)</sup> gibt es einen Hinweis oder eine Fußnote.

Endnote (Ergebnis ist am Ende des Beitrags, bei den Fußnoten): 

<a name="A"></a>
<a name="B" href="#" target="_blank">Der Linktext zu Fußnote B</a>

Ergebnis:

An dieser StelleA könnte der Hinweis zu einem Link bzw. einer Fußnote stehen.
Oder zu diesem wichtigen WortB gibt es einen Hinweis oder eine Fußnote.

Eigendlich ist auch nur Seitenanker, bei dem der Start Hochgestellt wurde. Hochgestellt wird mit <sup></sup> und Tiefgestellt mit <sub></sub> je nach dem wo der Strich des p oder b hinzeigt. Auf Markdown Seiten sieht man immer wieder, dass das ganze mit [^1] und [^1]: funktinieren soll, naja tut es aber nicht.


Code Darstellung

In einer Zeile Code ziegen zu können zum Beispiel einen Link `<a href="#">Linktext</a>` werden zwei Gravis benutzt ` Code `.
Für einen Mehrzeiligen Code werden die ``` dreifach genommen und am Anfang und Ende gestellt (musste hier noch eine . (Punkt) vor setzten, sonst hätte ich den Code nicht innerhalb des Codes darstellen könne):
.```
<html>
    <head>
    </head>
</html>
.```

Ergebnis:

In einer Zeile Code ziegen zu können zum Beispiel einen Link <a href="#">Linktext</a> werden zwei Gravis benutzt ` Code `. Für einen Mehrzeiligen Code werden die ``` dreifach genommen und an den Anfang und an das Ende gestellt:

<html>
    <head>
    </head>
</html>

Manchmal Versteht das Markdown nicht, dass man die Symbole oder Schriftzeichen nicht in einem Markdown dargestellt bzw. bearbeitet werden soll. In einer solchen Situatuin kann man sich behelfen in dem man vor dem Symbol einen . (Punkt) setzt oder besser ein .


Zitate

> Das ist ein Zitat.

> Das ist ebenfalls ein Zitat
    >Ein Zitat innerhalb eines Zitat.
        > Ein Zitat innherhalb eines Zitat, welches innerhalb eines Zitats ist.

> Wichtig ist auch der Abstand zu einer neuen Zeil.  
Sonst fließt der Text ebenfalls ins Zitat ein.

Ab einer Leerzeile nicht mehr.

Ergebnis:

Das ist ein Zitat.

Das ist ebenfalls ein Zitat
Ein Zitat innerhalb eines Zitat.
Ein Zitat innherhalb eines Zitat, welches innerhalb eines Zitats ist.

Wichtig ist auch der Abstand zu einer neuen Zeil.
Sonst fließt der Text ebenfalls ins Zitat ein.

Ab einer Leerzeile nicht mehr.
Auch das Verschachtelung von Zitaten funktiniert nicht mit diesem Markdown.


Tabellen

|  Spalte 1 |Spalte 2 |
|-------|--|
|Zeile 1a|      Zeile 1b  |

| Spalte 1 | Spalte 2 |
|---------|----------|
| Zeile 1a | Zeile 1b  |

Ergebnis:

Spalte 1 Spalte 2
Zeile 1a Zeile 1b
Spalte 1 Spalte 2
Zeile 1a Zeile 1b

Das Tabellensystem wirkt auf den ersten Blick recht komplex, ist es aber nicht. Die erste Zeile ist immer der Header. Durch die zweite Zeile | --- | wird der Headerbereich definiert. Danach können beliebig viele Zeilen folgen. Es können auch beliebig viele Spalten geschrieben werden. In diesen beiden Beispielen soll noch einmal gezeigt werden, dass keine saubere Formatierung erforderlich ist. Bei größeren Tabellen kann eine saubere Formatierung jedoch von Vorteil sein. Es ist möglich, einzelne Spalten links, rechts oder zentriert darzustellen. Dazu muss in der Head-Definitionszeile mit Doppelpunkten gearbeitet werden, wie im folgenden Beispiel:

| Spalte 1 | Spalte 2 | Spalte 3 |
| :--------|    :----:   |---------:|
| Zeile 1a | Zeile 1b  | Zeile 1c  |
| Zeile 2a | Zeile 2b  |  Zeile 2c |

Ergebnis:

Spalte 1 Spalte 2 Spalte 3
Zeile 1a Zeile 1b Zeile 1c
Zeile 2a Zeile 2b Zeile 2c

Es folgt jetzt nochmal, was geht und was nicht geht.

|Das Funktiniert so nicht.|

|Nur einn Header, könnte ein Hinweistext sein.|
|-|

| : Auch, nur einn Header, könnte ein Hinweistext sein. : |
| |

| Das |Funktiniert |   
| auch | nicht  |

|   |   |
|---|---|
|Innerhalb der Tabelle sind Formatierung | __möglich__ |

|                    | 
|-------------|
| Das ganze hier könnte man auch als Hinweistext benutzen oder als Box um auf etwas wichtiges Hinzuweisen, zum Beispielen einen ganz wichtigen `Code der hier steht` , auch sieht man das dass ganze über zwei Zeilen hinweg geht, wenn es etwas mehr Text ist.   |

Ergebnis:

|Das Funktiniert so nicht.|

Nur einn Header, könnte ein Hinweistext sein.
: Auch, nur einn Header, könnte ein Hinweistext sein. :

| Das |Funktiniert |
| auch | nicht |
Innerhalb der Tabelle sind Formatierung möglich
Das ganze hier könnte man auch als Hinweistext benutzen oder als Box um auf etwas wichtiges Hinzuweisen, zum Beispielen einen ganz wichtigen Code der hier steht , auch sieht man das dass ganze über zwei Zeilen hinweg geht, wenn es etwas mehr Text ist.

Wenn es eine Tabellte sein soll, die definierte ist oder überall Trennstriche hat, muss man wieder auch HTML umsteigen wie in diesen Beispiel.

<table border=5 cellspacing=5>
  <tr>
    <th>Spalte 1</th>
    <th>Spalte 2</th>
    <th>Spalte 3</th>
  </tr>
  <tr>
    <td>Zeile 1a</td>
    <td>Zeile 1b</td>
    <td>Zeile 1c</td>
   </tr>
   <tr>
     <td>Zeile 2a</td>
     <td>Zeile 2b</td>
     <td>Zeile 2c</td>
   </tr>
</table>

Ergebnis:

Spalte 1 Spalte 2 Spalte 3
Zeile 1a Zeile 1b Zeile 1c


Sonstiges


Abkürzungen

[HTML]: Hyper Text Markup Language
HTML


weitere Code

CSS auf Beitrag einfügen

<style>
r { color: Red }
o { color: Orange }
g { color: Green }
</style>

- <r>TODO:</r> Important thing to do
- <o>TODO:</o> Less important thing to do
- <g>DONE:</g> Breath deeply and improve karma

Ergebnis:

  • TODO: Important thing to do
  • TODO: Less important thing to do
  • DONE: Breath deeply and improve karma

Hier wird ein CSS Style auf den einen Beitrag oder Seite eingefügt, der nur hier funktioniert.
Was man auch sieht, dass der Platz für den style im Ergebnis unsichtbar ist.

Emojis & Icons 🤩

🔴 <r>1</r>red   
🟠 orange:   
⚫ black  
...

Ergebnis:

🔴 1red
🟠 orange
⚫ black
⚪ white
🟣 purple
🟢 green
🟡 yellow
🔵 blue

Könnte z.B. für Anleitungen und den einzelnen Punkten auf Bilder genutzt werden.
Es folgen eine Reihe von Emojis & Icons, die einfach rauskopiert und benutzt werden können.

😁 😆 😅 😂 🤣 ☺️ 😊 😇 🙂 🙃 😉😋 😜 😝 😐😲🤔🤩 🤯 🧐 🤫🫣💀👍 👎
⚫️ ⚪️ 🔴 🔵 🟣 ​​🟠​ 🟡​ 🟢​ ​🟣 ​🟤​ 🔺 🔻 🔸 🔹 🔶 🔷 🔳 🔲 ▪️ ▫️ ◾️ ◽️ ◼️ ◻️ ⬛️ ⬜️ ​🟥 ​🟧​ 🟨​ 🟩​ 🟦 ​🟪​ ​🟫​

⚠️ Test 😄 1⃣ ##### *Inhaltsverzeichnis:* - [Überschriften](#syntax1) - [Schrift Formatierung](#syntax2)

Hier ist die Sprungmarke

HTML

*[px]: Pixel

Fußnote A
Kommend von Sprungmarke B (der Link führt zu nix :)
Zurück Springen zum Thema Fußnoten


Sprungmarken HTML-Markdown inkl. CSS Hilfe

https://cmsstash.de/website-praxis/markdown-fur-webseiten#h-abkuerzungen https://www.chesstech.org/help/markdown https://michelf.ca/projects/php-markdown/extra/#footnotes https://markdown-syntax.de/Syntax/Betonungen/ https://elvis.inf.tu-dresden.de/wiki/index.php/Markdown_-_Eine_%C3%9Cbersicht#Tabellen https://www.markdownguide.org/extended-syntax/#emoji

Hauptbild von fancycrave1 auf Pixabay

Suche

Kategorien