Markdown

Erstellt: Oktober 11, 2024 | Änderung: Januar 12, 2025 | Kategorien: Bludit-Blog

Hier mal aufgelistet was in Bludit geht bzw. mit dem SimpleMDE.
Was ist Markdown? Markdown ist quasi eine Vereinfachung von HTML, somit lassen sich dann Texte schneller schreiben und Formatierungen und Tags leichter einbetten. Zum Beispiel, statt <h1> Überschricht </h1> zu schreiben reicht es im Markdown einfach # Überschrift oder ## Überschrift für eine h2 Überschrift. Im Hintergrund werden die Formatierungen dann umgewandelt und für den Betrachter macht es keinen Unterschied, der Schreiber spart sich aber einiges an Zeit.
Es gibt noch noch das Plugin Marldown Extra mit welchem man noch eine vielzahl an weiteren Möglichkeiten hat. Zum Beispiel kann man auch innerhalb eines <div markdown="1"></div> Markdown benutzen. Oder auch Seitenanker in die # Überschriften mit Hilfe eines {#linkiregndwas} intigrieren, todo Listen und einfach ganz viel mehr. Leider hat das Plugin ein Problem mit HTML. Bei mir würde das Konaktformular nicht funktieren, daher muss ich leider darauf verzichten. Aber meistens gibt es immer ein workaround oder stumpf HTML, womit sich alles lösen lässt, wie die eben angesprochenen Seitenanker Anker2, dazu später mehr.

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

🔴 1red: +5V 🟠 orange: +3.3V ⚫ black: ground ⚪ white: ground (pull-down) 🟣 purple: I2C signal 🟢 green: clock signal 🟡 yellow: WS2812 signal 🔵 blue: resistor bridge (analogue) input

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

Ü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 bestimmt Dinge gleiche mehrere möglichkeiten der Benutzung, da kann jeder entscheiden, was er mag und was nicht. (Ja in der Ergebnisansicht ist alles kursiv, aber ist so: **Fett** wird zu Fett.)

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

Ergebnis:

Punkt 1 Strich

Punkt 2 Strich

Punkt 3a Stern

Punkt 4a Plus

Erstens

Zweitens

Drittens

fünftens

erstens

Auch hierbei gibt es viele Möglichkeiten, die man beim schreiben hat, zeigen aber alle das gleiche. Das schöne ist, wenn man eine neue Zeile anfängt, führt er die benutzte Auflistung automatisch weiter. Das ganze funktiniert auch mit Zahlen, der SimpleMDE führt diese auch fort, wenn man im nachhinein zahlen in der Reihenfolge ändert, ändert das nichts an dem Ergebnis. Aufgepasst auch wenn man mit einer Zahl bzw. einem Datum die Zeile beginnt wird daraus eine Liste.

Verschachtelte Aufzählungen

1. Punkt 1
2. Punkt 2
    - Unterpunkt 1
        - Unterpunkt 2
                - Unterunterpunkt 1
                * Unterunterpunkt 2
                + Unterunterpunkt 3
1. Punkt A
2. Punkt B
    3. Unterpunkt C
        4. Unterpunkt D
                5. Unterpunkt E 

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

Ergebnis:

Punkt 1

Punkt 2

Unterpunkt 1

Unterpunkt 2

Unterunterpunkt 1

Unterunterpunkt 2

Unterunterpunkt 3

Punkt A

Punkt B

Unterpunkt C

Unterpunkt D

Unterpunkt E

Punkt A
Punkt B
1. Unterpunkt C
  1. Unterpunkt D
    1. Unterpunkt E

Wie man sieht kann man noch Unterpunkte in "diesen" Marktdown schreiben, mehr aber auch nicht und auch nur wenn sie sich von von ihrem Überpunkt unterscheiden, wie in der zweiten hälfte des Ergebnis zu sehen ist.

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.⥎ ⥎  ↵
↵
↵
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, reichen 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, um mehrere Leerezeilen zu bekommen. Möchte man mehrere Leerzeilen haben muss dann noch ein <br> eingefügt werden bzw. mehrere.

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.

Klingt kompliziert ist aber gar nicht wenn man sich erstmal an den Syntax gewöhnt hat. Leider zieht man beim schreiben nicht immer ob man wirklich hinter jeden gewünschen Absatz mindestens zwei Leerzeichen gesetzt hat, da muss man sich selber streng kontrollieren.

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

Zu dem Thema Bilder in Bludit verlinken bzw. einzubauen, habe ich hier einen eigenen Beitrag gewitmet link, da mir in diesem Fall Markdown zu schlicht ist, besondert vermisse ich das target="blank" in den Links, also das sich der Link in einem neuen Tap öffnet. Grundsätzlich kann Markdown dass, aber nicht dieses hier. Also greife ich bei Verweisen auf HTML zurück. <a href="https://www-adresse.de" target="_blank">Link Text</a>

Seitenanker

[Anker1](#anker1)

Ergebnis:

Anker1

So wie das hier steht ist es nur die halbe Wahrheit, denn in diesem SimpleMDE 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.

........
Aber meistens gibt es immer ein workaround oder stumpf HTML, womit sich alles lösen lässt, wie die eben angesprochen <a name="anker1"></a>Seitenanker [Anker2](#anker2), dazu später mehr.

Das ist aus dem oberen Teil dieses Beitrags, wie man sieht ist das Gegenstück von dem <a name="anker1"></a> einfach zwischen die Wörter gesetzt und dennoch nicht zu sehen. 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 <a name="andereSeite"></a> wie in folgenden Beispiel < a href="http://www-adresse.de" "#andereSeite">Link-Ziel</a>, wichtig ist, immer auf Groß- und Kleinschreibung zu achten.

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 Stelle^A könnte der Hinweis zu einem Link bzw. einer Fußnote stehen.
Oder zu diesem wichtigen Wort^B 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. Mit dem Markdown Plus Plugin funktiniert das ganze mit [^1^] und [^1^]:.

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 Head, durch die zweite Zeile | --- | wird der Headbereich definiert, danch können beliebig viele Zeilen folgen. Auch könnnen beliebig viele Spalten geschrieben werden. In diesen beiden Beispielen soll nochmal gezeigt werden, dass es nicht unbedingt eine saubere Formatierung bedarf, könnte bei größeren Tabellen aber von vorteil sein, wenn sie sauber geschrieben sind.
Es ist möglich einzelne Spalten links, rechts oder zu zentrieren. Dazu muss dann in die Headdefinisations Zeile 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.


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

Aber auch hier gibt noch weitere Möglichkeiten, die Tablle kann im ganzen eingefärbt werden mit bordercolor="green" bgcolor="yellow" innerhalb des ersten <table>. Oder auch jede Zelle einzeln zu färben ist möglich mit bgcolor="#00FFFF" innerhalb des <th> oder <td>. Die größen der einzellen Zellen können angepasst werden mit einem width="200" innerhalb des <th> oder <td>.

<table border="10" cellspacing="25" cellpadding="25" bordercolor="green" bgcolor="yellow">
  <tr>
    <th width="200">Spalte 1</th>
    <th>Spalte 2</th>
    <th bgcolor="#00FFFF" >Spalte 3</th>
  </tr>
  <tr>
    <td width="200" height="100" >Zeile 1a</td>
    <td bgcolor="#00FFFF" >Zeile 1b</td>
    <td>Zeile 1c</td>
   </tr>
</table>

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

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

links oben	mittig zentriert	rechts unten
oben zentriert	oben zentriert	oben zentriert
rechts unten	rechts unten	rechts unten

Traum	Zeit	Luft
Licht	Himmel	Leben

Abkürzungen

[HTML]: Hyper Text Markup Language
HTML

Hier ist die Sprungmarke

HTML

*[px]: Pixel

Fußnote A
Der Linktext zu Fußnote B
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

Markdown

Erstellt: Oktober 11, 2024 | Änderung: Januar 12, 2025 | Kategorien: Bludit-Blog

Inhaltsverzeichnis:

Überschriften

Ergebnis:

Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4

Überschrift h5

Überschrift h6

Schrift Formatierung

Ergebnis:

Liste / Aufzählung

Ergebnis:

Verschachtelte Aufzählungen

Ergebnis:

Absätze

Ergebnis:

Ergebnis:

Verlinkungen

Ergebnis:

Seitenanker

Ergebnis:

Fußnoten

Ergebnis:

Code Darstellung

Ergebnis:

Zitate

Ergebnis:

Tabellen

Ergebnis:

Ergebnis:

Ergebnis:

Ergebnis:

Traum

Zeit

Luft

Licht

Himmel

Leben

Abkürzungen

Hier ist die Sprungmarke

Suche

Kategorien