Markdown Spickzettel https://strobelstefan.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

15 KiB

Markdown Spickzettel

🔗 https://www.strobelstefan.org


Inhaltsverzeichnis

  1. Was ist Markdown?
    1. Editoren
      1. 🔝 Typora
      2. 📓 Notepad++
      3. ⚛️ Atom Editor
      4. 📚 Joplin
    2. 👀 Webbrowser- Markdown Viewer
      1. ☁️ Chrome Browser
      2. 🦊 Mozilla FIrefox
  2. 🗣️ Metadaten
  3. 🌐 Allgemeine Befehle
  4. 🔝 Inhaltsverzeichnis einfügen
  5. 💻 Code
  6. 🏷️ Überschriften
  7. ↩️ Zeilenumbruch
  8. 📄 Seitenumbruch
  9. Checkliste/Aufgabenliste
  10. *️⃣ Ungeordnete Listen
  11. 1️⃣ Geordnete Liste
  12. 💬 Zitate
  13. 🔖 Verweise innerhalb des Dokuments
  14. 🔗 Links
  15. 🖼️ Bilder einfügen
    1. Möglichkeit 1 - Referenzen
    2. Möglichkeit 2 - Bilder direkt einbinden
    3. Möglichkeit 3 - Verwendung von HTML
    4. Möglichkeit 4: Badges von Shields.io
  16. 😀 Emojis
  17. 🖍️ Machs farbig
  18. ↙️ ↗️ Schriftgröße und -art ändern
    1. ↗️ Schrift vergrößern
    2. ↙️ Schrift verkleinern
  19. 💹 Tabellen
  20. 👣 Fußnoten
  21. 📊 Mathematische Formeln
  22. Donation

Was ist Markdown?

Markdown für Menschen eine leicht verständliche Auszeichnungssprache.

Dateiendung für Markdown

Die Dateiendung .md, in manchen Fällen auch .markdown, steht für "Markdown Documentation". Diese Bezeichnung weist darauf hin, dass jedes .md-File in einer der verfügbaren Dialekte der Markdown-Entwicklungssprachen geschrieben ist. Diese zählen zu den Markup- bzw. Auszeichnungssprachen.

Editoren

Die meisten gängigen Editoren lassen sich mit ein paar Handgriffen so anpassen, dass Markdown angezeigt werden können.

Typora

Ist ein Editor speziell für Markdown. Das Programm ist wunderbar einfach zu handhaben und Markdown-Dokumente lassen sich damit sehr gut erstellen und bearbeiten. Auf meiner Website habe ich einen ausführlichen Beitrag geschrieben 🔗 Typora – mein favorisierter Markdown-Editor für den Desktop

Hilfreiche Shortcuts für Typora:

  • Quellcodemodus = Strg + # (falscher Shortcut im Menü Darstellung(V) für deutsches Tastaturlayout)
  • Emojis einfügen = Win + .(Windows-Taste + Punkt)

Notepad++

Es wird für den beliebten Editor Notepad++ eine Erweiterung angeboten, die sich über die "Plugin-Verwaltung" sehr einfach installieren lässt.

Erweiterungen --> Plugin-Verwaltung

Dort sucht man nach dem Plugin "MarkdownViewer++" und installiert es.

Anschließend lassen sich die Markdown-Dateien in der Vorschau ausgeben. Die Vorschau wird mit der Tastenkombination Strg + Shift + M aktiviert.

Atom Editor

Für den Atom Editor habe ich die folgenden Erweiterungen für Markdown installiert.

  • language-markdown
  • markdown-writer

In den Core Packages von Atom ist bereits ein Plugin für die "Markdown Preview" enthalten. Die Vorschau lässt sich wie bei Notepad++ mit der Tastenkombination Strg + Shift + M aktivieren.

Weitere Infos zum Atom Editor findet ihr auf meiner Website:

Joplin

Ein guter Markdown-Editor ist Joplin. Ich habe den Editor bereits in meinem Blog vorgestellt. 🔗 Nextcloud – Notizen mit unterschiedlichen Endgeräten bearbeiten

Der Editor eignet sich hervorragend für die Speicherung von Notizen auf Cloud-Diensten, wie z.B. Nextcloud.

Webbrowser - Markdown Viewer

Bei den Editoren "Notepad++" und "Atom" kann es evtl. zu Problemen in der Preview kommen, wenn man Links setzt. Hier bietet sich ein relativ unkomplizierter Workaround an. Anstatt die Preview in den Editoren anzeigen zu lassen, kann die Anzeige auch in einem Webbrowser erfolgen. Für die Anzeige ist eine Erweiterung zu installieren.

Chrome Browser

🔗 Markdown Viewer von simov.github.io

Mozilla Firefox

🔗 Markdown Viewer Webext von Kulero, Cimbali

Metadaten

Metadaten können in Markdown-Dateien hinzugefügt werden.

---
[//]: # (Title: Title)
[//]: # (Author: Author´s Name)
[//]: # (Date: yyyy-mm-dd)
[//]: # (Comment: Kommentare) 
[//]: # (Tags: #tag1, #tag)  
[//]: # (CSS: https://path-to-css)
---

Quelle: 🔗 https://stackoverflow.com/questions/44215896/markdown-metadata-format

Allgemeine Befehle

Kursiv = *Kursiv*

Fett = **Fett**

Kursiver und fetter Text = ***Kursiver und fetter Text***

Durchgestrichener Text = ~~Dieser Text ist durchgestrichen.~~

Horizontale Linie = ***

Horizontale Linie = ---

Inhaltsverzeichnis einfügen

[TOC]

Code

Code einfügen = Am Anfang und am Ende einer Zeile

Code Block - Möglichkeit 1

```
Code Block
```

Code Block - Möglichkeit 2
Einrücken um 4 Leerzeichen

Test
Test2

Überschriften

Überschrift 1 = # Überschrift 1
Überschrift 2 = ## Überschrift 2
Überschrift 3 = ### Überschrift 3
Überschrift 4 = #### Überschrift 4
Überschrift 5 = ##### Überschrift 5
Überschrift 6 = ###### Überschrift 6

Zeilenumbruch

Ein Zeilenumbruch wird durch 2 Leerzeichen am Zeilenende erzwungen.

Ohne Zeilenumbruch
Erste Zeile Zweite Zeile

Mit Zeilenumbruch
Erste Zeile
Zweite Zeile

Seitenumbruch

Ein Seitenumbruch kann in einem Markdown-Dokument an beliebiger Stelle eingefügt werden. Auf die Markdown Darstellung hat das keinen Einfluss. Der Seitenumbruch wird erst bei einem Export in eine PDF-Datei eingefügt.

<div style="page-break-after: always;"></div>

Checkliste/Aufgabenliste

  • Text
  • Text
- [ ] Text muss angegeben werden
- [ ] Text muss angegeben werden

Ungeordnete Listen

Um mit Markdown eine unsortierte Liste zu erstellen, könnt ihr die Zeichen Plus, Bindestrich oder ein Sternchen verwenden

Liste mit *

  • Listeneintrag
  • Listeneintrag
* Listeneintrag
* Listeneintrag

Liste mit * und Einrückungen

Die einzurückende Zeile ist mit 4 Leerzeichen einzurücken

  • Listeneintrag
  • Listeneintrag
    • Listeneintrag
    • Listeneintrag
* Listeneintrag
* Listeneintrag
    * Listeneintrag
    * Listeneintrag  

Liste mit +

  • Listeneintrag
  • Listeneintrag
+ Listeneintrag
+ Listeneintrag

Liste mit -

  • Listeneintrag
  • Listeneintrag
- Listeneintrag
- Listeneintrag

Geordnete Liste

1. Line
2. Line
    1. Sub-Line
    2. Sub-Line
3. Line
  1. Sub-Line
  2. Sub-Line

Zitate

Zitatebene 1 = > Zitat
Zitatebene 2 = >> Zitat im Zitat
Zitatebene 3 = >> Zitat im Zitat im Zitat

1. Überschrift mit Verweis

2. Überschrift - Verweis

3. Überschrift - Verweis

Als Code sieht das Ganze dann so aus

1. [Überschrift - Verweis](#1-überschrift-mit-verweis)
2. [Überschrift - Verweis](#2-überschrift-mit-verweis)
3. [Überschrift - Verweis](#3-überschrift-mit-verweis)

# 1. Überschrift mit Verweis
# 2. Überschrift - Verweis
# 3. Überschrift - Verweis

Verweise innerhalb des Dokuments

Dieser Link verweis auf den nächsten Abschnitt "Links". Der Text in der runden Klammer ist dabei immer klein zu schreiben. Links

[Links](#links)

Verweis auf den Abschnitt "Ungeordnete Listen"

Ungeordnete Listen

[Ungeordnete Listen](#ungeordnete-listen)

Verweis auf nummerierte Überschriften

  1. Überschrift - Verweis
  2. Überschrift - Verweis
  3. Überschrift - Verweis

Links

[Link zu Seite](/de/help/how-to-make-a-website)  
[Link zu Datei](/media/downloads/yellow.pdf)  
[Link zu Webseite](https://datenstrom.se/de/)

Bilder einfügen

Die grundsätzliche Syntax für das Einfügen bin Bildern sieht wie folgt aus.

![image photo.jpg]
![image photo.jpg Beispiel]
![image photo.jpg "Dies ist ein Beispielbild"]

Möglichkeit 1 - Referenzen

Es wird das Bild als Referenz im Dokument definiert.

[Bild 1]: /pfad/zum/bild.png  "Beschreibung"

Im Text selbst kann dann auf das Bild referenziert werden

![Irgendeine Beschreibung][Bild 1]

Möglichkeit 2 - Bilder direkt einbinden

Das Bild lässt sich auch direkt sofort in den Text einfügen.

![Irgendeine Beschreibung](/pfad/zum/bild.png)

Möglichkeit 3 - Verwendung von HTML

Eine flexiblere Möglichkeit Bilder in den Text einzufügen, ist die Verwendung von HTML. Damit lassen sich auch einfache andere Attribute für das Bild einstellen, wie Höhe, Breite, etc.

<img src="pfad/zum/bild.png" width="250" height="350" alt="Irgendeine Beschreibung">

Beim referenzieren auf das Bild ist davor kein / zu verwenden!

Möglichkeit 4: Badges von Shields.io

Badges lassen sich mit Hilfe des kostenloses Webdienstes shields.io sehr einfach in eine Markdown-Datei einfügen. Es lassen sich statische und dynamische Badges direkt über die offizielle Webpräsenz erstellen.🔗 https://shields.io/

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/donate?hosted_button_id=xxxxxxxxx) 

Emojis

Es gibt eine große Zahl an Emojis, die in Markdown-Dokumente eingefügt werden können.

⚠️ ACHTUNG:

:warning: __ACHTUNG:__

😀 😄 🤣 😉

:grinning: :smile: :rofl: :wink:

Auf GitHub finden sich einige gute Emoji-Cheat-Sheets

Machs farbig

Bring mehr rote Farbe in deinen Text.
Bring mehr blaue Farbe in deinen Text.
Bring mehr grüne Farbe in deinen Text.
Bring mehr gelb Farbe in deinen Text.

Bring mehr <span style="color:red">rote</span> Farbe in deinen Text.  
Bring mehr <span style="color:blue">blaue</span> Farbe in deinen Text.  
Bring mehr <span style="color:green">grüne</span> Farbe in deinen Text.
Bring mehr <span style="color:yellow">gelb</span> Farbe in deinen Text.

Es gibt auf fetten farbigen Text Rot ist fett in einem normalen Text.

<span style="color:red">**Rot ist fett**</span> in einem normalen Text.

Schriftgröße und -art ändern

Die Maßeinheit em wird im Schriftsatz zur Bestimmung der Zeichenbreite in Abhängigkeit von der Schriftgröße verwendet.
(Quelle: https://de.wikipedia.org/wiki/Em_(Schriftsatz))

Schrift vergrößern

  • 2em Verdoppelt die Schriftgröße
  • 4em vervierfacht die Schriftgröße

Das ist normaler Text der auf einmal ganz gross wird.

Das ist normaler Text der auf einmal ganz <span style="font-family:Tahoma; font-size:4em;">gross</span> wird.

Schrift verkleinern

Das Gleiche geht natürlich auch in die andere Richtung, die Schriftgröße lässt sich verkleinern.

Das ist normaler Text der auf einmal ganz ganz klein wird.

Das ist normaler Text der auf einmal ganz <span style="font-family:Tahoma; font-size:0.5em;">ganz klein</span> wird.

Tabellen

Tabellen lassen sich sehr einfach schreiben. Mit | lassen sich die Spalten und Felder kennzeichnen, mit : definiert man die Textausrichtung.
Wie auch schon bei anderen Sprachen, z.B. LaTeX und HTML, ist das manuelle Erstellen von Tabellen sehr umständlich, Editoren bieten jedoch eine gute Unterstützung.

Spaltenüberschrift 1 Spaltenüberschrift 2 Spaltenüberschrift 3
Inhalt align=left Inhalt align=center Inhalt align=right
Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt
Inhalt Inhalt Inhalt
| Spaltenüberschrift 1 | Spaltenüberschrift 2 |  Spaltenüberschrift 3 |  
|:-----------|:-----------:| -----------:| 
| Inhalt align=left  | Inhalt align=center | Inhalt align=right |
| Inhalt | Inhalt | Inhalt |
| Inhalt | Inhalt | Inhalt |
| Inhalt | Inhalt | Inhalt |

Fußnoten

Ein Text mit einer Fußnote.1

Ein Text mit einer Fußnote.[^1]
[^1]: Der Text wird automatisch am Seitenende platziert.

Mathematische Formeln

Auch Markdown beherrscht mathematische Formeln, die aus TeX entliehen sind.

Vorlagen für LaTeX Formeln findet ihr im Blog
🔗 https://strobelstefan.org/2008/03/22/latex-vorlagen/

oder auf Codeberg
🔗 https://codeberg.org/strobelstefan.org/latex-templates


Donation

Du findest meine Vorlagen hilfreich, dann kannst du mir gerne eine Kaffee ausgeben Do you find the templates helpful, then feel free to buy me a coffee

😃 Donate 😊 Donate 😎


🕊️ Twitter 🐘 Mastodon RSS

🔗 www.strobelstefan.org


  1. Der Text wird automatisch am Seitenende platziert. ↩︎