Markdown

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Markdown ist eine vereinfachte Auszeichnungssprache, die häufig auf Plattformen im Programmiererumfeld wie Discord, GitHub oder Stack Overflow verwendet wird.

Im SELFHTML-Forum kommt ebenfalls Markdown, hier in dem Dialekt kramdown, zum Einsatz.

Zeichen, die in kramdown eine besondere Bedeutung haben, müssen maskiert werden, wenn sie im Text verwendet werden sollen. Das Maskierungszeichen ist der Backslash (\).

Block- vs. Inline-Elemente

Alle Blockelemente wie Absätze, Überschriften oder Listen müssen von Leerzeilen eingeschlossen werden.

Beachte: Leerzeilen müssen wirklich leer sein, dürfen also auch keine Leerzeichen enthalten.

Hervorhebung

Hervorhebungen erzeugst du, indem du den hervorzuhebenden Abschnitt in Asteriske (Sternchen) oder Unterstriche einschließt. Beachte, dass du zwischen dem hervorzuhebenden Text und den Formatierungszeichen keine Leerzeichen setzen darfst.

Ziel Kramdown
Hervorhebung *Hervorhebung*
_Hervorhebung_
starke Hervorhebung **starke Hervorhebung**
__starke Hervorhebung__
kursiv starke Hervorhebung ***kursiv starke Hervorhebung***
___kursiv starke Hervorhebung___
Die Sonderzeichen musst du maskieren, wenn du sie im Fließtext verwenden willst.
*wichtig*
_wichtig_ 		\*wichtig\*
\_wichtig\_
**sehr wichtig**
__sehr wichtig__ 		\*\*sehr wichtig\*\*
\_\_sehr wichtig\_\_

Im Forum gibt es oberhalb des Antwortformulars Buttons, um diese Darstellung zu erzielen.

Durchstreichung

Du kannst einen Text durchstreichen, indem du ihn in jeweils zwei Tilden einschließt.

Ziel Kramdown
durchgestrichen ~~durchgestrichen~~

Links

Ziel Kramdown
https://example.com <https://example.com>
Linktext [Linktext](http://example.com)

Für die zweite Variante gibt es im Forum einen Button oberhalb des Antwortfeldes.

Absätze und Zeilenumbrüche

Absätze und andere Blockelemente werden in Leerzeilen eingeschlossen. Für einen einfachen Zeilenumbruch setzt du zwei Leerzeichen an das Zeilenende.

Beachte: Leerzeilen müssen wirklich leer sein, dürfen also auch keine Leerzeichen enthalten.
Ziel Kramdown

Absatz 1

Absatz 2


Absatz 1

Absatz 2
Zeile 1
Zeile 2 		Zeile 1  
Zeile 2

Überschriften

Ziel Kramdown
Überschrift 

# Überschrift #



Überschrift
===
Überschrift 

## Überschrift ##



Überschrift
---

In Forumsbeiträgen sind die Überschriften letztlich dritter bzw. vierter Ordnung.

Fußnoten

Die Kombination aus [^Zahl] und [^Zahl]: erzeugt eine Fußnote. Die Nummerierung der Fußnoten beginnt bei 1, unabhängig von den gewählten Zahlen, die eigentlichen Fußnoten können als eigene Zeile in beliebiger Reihenfolge an eine beliebige Stelle des Textes gesetzt werden.

Ziel Kramdown
Text[1]
  1. ↑ Erläuterung
Text[^1]

[^1]:Erläuterung

Bilder

Die Syntax für Bilder ähnelt sehr der für Links.

Ziel Kramdown
Hund.svg ![Doku-Hund](https://example.com/img.svg)
![Doku-Hund](https://example.com/img.svg "Der Hund aus der Dokumentation")

Für die zweite Variante gibt es im Forum einen Button oberhalb des Antwortfeldes. Die Angabe für das title-Attribut kann man auch weglassen.

Code

Inline-Code wird in Backticks eingeschlossen.

Ziel Kramdown
<html> `<html>`
<html> `<html>`{: .language-html}


Mehrzeilige Codebeispiele werden in drei Tilden eingeschlossen, eine optionale Sprachangabe legt Regeln für das Syntax-Highlighting fest. Dieser Codeblock wiederum muss (wie jedes Blockelement) in Leerzeilen eingeschlossen werden.

Ziel Kramdown 
<html>
  <head>
 

~~~
<html>
  <head>
~~~


<html>
  <head>
 

~~~ html
<html>
  <head>
~~~

Die farbliche Gestaltung des Quelltextes übernimmt dabei das Tool Prism, eine Liste der unterstützten Sprachen findest du unter https://prismjs.com/#supported-languages.

Beachte: In der dynamisch während des Schreibens generierten Vorschau wird nur die Syntax der Sprachen HTML, JavaScript und CSS hervorgehoben[1]. Nach dem Abschicken des Beitrags jedoch alle.

Du kannst Codebeispiele, die so nicht verwendet werden sollten, auszeichnen. Dazu fügst du der Sprachangabe das Schlüsselwort bad hinzu; für besonders gelungene Codebeispiele kannst du das Schlüsselwort good verwenden.

Ziel Kramdown 
<html>
  <header>
 

~~~ html, bad
<html>
  <header>
~~~

Der Button oberhalb des Antwortblockes schlägt situationsbedingt einen ein- oder mehrzeiligen Codeabschnitt vor. Befindet sich der Cursor unterhalb einer Leerzeile, so wird ein mehrzeiliger Codeabschnitt angeboten (3 Tilden, optionale Eingabe einer Sprache), anderenfalls wird ein einzeiliger Codeabschnitt vorgeschlagen (Backticks).

ASCII-Art

Die Auszeichnung als Code erlaubt auch die Darstellung von ASCII-Art oder Tabellen, falls die Kramdown-Umsetzung ungeeignet erscheint.

Ziel Kramdown
><o(((°> 

~~~
><o(((°>
~~~

Listen

Listen sind Blockelemente und müssen als solche oberhalb und unterhalb von Leerzeilen eingeschlossen sein.

ungeordnete Listen

Ziel Kramdown
  • Listenpunkt
  • Listenpunkt
 
 
* Listenpunkt
* Listenpunkt

Als Aufzählungszeichen darfst du den Asterisk (*), das Pluszeichen (+) sowie das Minuszeichen (-) verwenden. Die Zeichen können auch innerhalb einer Liste beliebig gewechselt werden.

Im Forum gibt es einen Button oberhalb des Antwortfeldes.

geordnete Listen

Ziel Kramdown
  1. Listenpunkt
  2. Listenpunkt
 
 
1. Listenpunkt
2. Listenpunkt

Die Kombination [Zahl][Punkt][Leerzeichen] erzeugt eine geordnete Liste. Möchtest du mit einer anderen Zahl beginnen, verwendest du das start-Attribut {: start="4"} vor oder nach der Liste.

Möchte man einen Absatz mit einer Zahl und einem Punkt beginnen, so muss der Punkt maskiert werden.

Ziel Kramdown

1995. Ein guter Jahrgang. 

 
1995\. Ein guter Jahrgang.

Um zwei aufeinander folgende Listen zu erstellen, musst du die erste Liste ausdrücklich beenden – dafür ist in kramdown der End-Of-Block Marker ^ vorgesehen: 

* foo
* bar
^ 
* foo
* bar

Beschreibungslisten

Den dd-Elementen wird ein Doppelpunkt vorangestellt.

Ziel Kramdown
Vokabel
Beschreibung
 
 
Vokabel
: Beschreibung

Bei Verwendung mehrerer zusammengehörender dt-Elemente muss man wieder den Zeilenumbruch berücksichtigen, mehrere dd-Elemente kann man „einfach so“ einfügen.

Ziel Kramdown
Vokabel 1
Vokabel 2
Beschreibung
Vokabel 1   Vokabel 2 : Beschreibung
Vokabel
Beschreibung 1
Beschreibung 2
 
 
Vokabel
: Beschreibung 1
: Beschreibung 2

Tabellen

Durch die Verwendung von Pipes (|) werden einfache Tabellen erstellt. Eine Tabelle besteht immer aus einem Tabellenkopf und einem -körper.

Ziel Kramdown
th th
td td 
|th|th
|---|---
|td|td

Mit Doppelpunkten innerhalb der Trennlinien legst du die Ausrichtung der jeweiligen Spalte fest.

Ziel Kramdown
linksbündig zentriert rechtsbündig
Dieser Text sollte linksbündig sein. Wenn der Platz nicht reicht, sieht man es auch. ein längerer Text und schließlich was rechtsbündiges. 
|linksbündig | zentriert | rechtsbündig |
|:-----------|:---------:|---:|
|Dieser Text … | ein längerer Text | … was rechtsbündiges.

horizontale Linien

Enthält eine Zeile ausschließlich Minus- und Leerzeichen oder ausschließlich Asteriske und Leerzeichen, so wird eine horizontale Linie erzeugt. Allerdings darf die Zeile nicht mit mehr als 4 Leerzeichen beginnen, weil sonst der folgende Text als Codeblock interpretiert wird.

Ziel Kramdown
---
* ** *** ** *

LaTeX (Mathematische Formeln)

TeX ermöglicht unter anderem das Erstellen mathematischer Formeln. Schließe die Formel in zwei Dollarzeichenpaare ein, um sie darzustellen.

$$ \mathrm e^{\mathrm i \pi} + 1 = 0 $$

Eine Übersicht über die LaTeX-Befehle findest du in der Wikipedia: de.wikipedia.org/wiki/Hilfe:TeX

Beachte: Standardmäßig werden Formeln auf einer Zeile angeordnet. Wenn du Zeilenumbrüche einfügen möchtest, kannst du das laut LaTeX-Dokumentation mit einem doppelten Backslash \\ tun. Manche LaTeX-Konstrukte wie align benötigen ausdrücklich Zeilenumbrüche. Im SELFHTML-Forum interagiert allerdings der Markdown-Interpreter mit dem Mathematik-Interpreter, sodass für einen Zeilenumbruch fünf Backslashes \\\\\ erforderlich sind.

Auszeichnung von Text in einer abweichenden Sprache

Um eine Textphrase als anderssprachig zu kennzeichnen, verwende im HTML das lang-Attribut.

Ziel Kramdown
<em lang="fr">Salut!</em> **Salut!**{: @fr}

Du kannst auch ganze Absätze als anderssprachig kennzeichnen.

Ziel Kramdown
<p lang="fr">Salut!</p> Salut!

{: @fr}

Emojis

Wenn du nach einem Leerzeichen einen Doppelpunkt eingibst, öffnet sich eine Emoji-Auswahl.

Ziel Kramdown
😉 :wink

Die vollständige Liste unterstützter Emojis findest du unter github.com/felixrieseberg/.

Weblinks

  1. ↑ SELFHTML-Forum: Gerade hat das Syntaxhighlighting für PHP in der Vorschau nicht geklappt.

Abgerufen am 12.10.2026
von "http://wiki.selfhtml.org/wiki/Markdown"