Markdown

Seien wir ehrlich: Das Schreiben von Inhalten für das Web ist ermüdend. WYSIWYG-Editoren helfen, diese Aufgabe zu erleichtern, aber sie führen im Allgemeinen zu schrecklichem Code oder noch schlimmeren, hässlichen Webseiten.

Markdown ist ein besserer Weg, um HTML zu schreiben, ohne all die Komplexität und Hässlichkeit, die es normalerweise begleitet.

Einige der wichtigsten Vorteile sind:

• Markdown ist einfach zu erlernen, mit minimalen zusätzlichen Zeichen, so dass es auch schneller ist, Inhalte zu schreiben.
• Weniger Fehler beim Schreiben in Markdown.
• Erzeugt gültige XHTML-Ausgabe.
• Hält den Inhalt und die visuelle Anzeige getrennt, damit Sie das Aussehen Ihrer Website nicht stören können.
• Schreibe in einen Texteditor oder eine Markdown-Anwendung, die du magst.
• Markdown ist eine Freude zu benutzen!

John Gruber, der Autor von Markdown, drückt es so aus:

Das vorrangige Entwurfsziel für Markdowns Formatierungssyntax besteht darin, es so leserlich wie möglich zu machen. Die Idee ist, dass ein Markdown-formatiertes Dokument unveränderbar als einfacher Text veröffentlicht werden sollte, ohne dass es so aussieht, als wäre es mit Tags oder Formatierungsanweisungen versehen worden. Während die Markdown-Syntax von mehreren bestehenden Text-zu-HTML-Filtern beeinflusst wurde, ist die einzige große Quelle der Inspiration für die Syntax von Markdown das Format von Nur-Text-E-Mails.

- John Gruber

Ohne weitere Verzögerung, lassen Sie uns über die Hauptelemente von Markdown gehen und wie das resultierende HTML aussieht:

Überschrift

Überschrift von h1 bis h6 werden mit einem # für jeden Level erstellt:

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

ergibt folgendes:

h1 Überschrift

h2 Überschrift

h3 Überschrift

h4 Überschrift

h5 Überschrift

h6 Überschrift

Kommentar

Kommentar ist mit HTML kompatible

<!--
Das ist Kommentar
-->

Kommentar kann man im Text einbauen dieser wird jedoch NICHT auf der Homepage ausgegeben:

Horizontal Regeln

Das HTML <hr> Element ist für das Erstellen eines "thematische Pause" zwischen Paragraph-Level Elementen. In Markdown, kannst Du das <hr> mit jedem der folgenden Elemente erstellen :

• ___: drei aufeinanderfolgenden Unterstriche
• ---: drei aufeinanderfolgenden Bindestriche
• ***: drei aufeinanderfolgenden Sternchen

wird wie folgt dargestellt:

---

---

---

Normal Text

Normaler Text wird mit den <p></p> HTML Tags augegeben.

Dieser Text:

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

wird als HTML wie folgt ausgegeben:

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

Hervorhebung

Fett gedruckt

Zum Hervorheben eines Textausschnitts mit einem größeren Schriftgewicht.

Der folgende Textausschnitts wird als Fett gedruckt ausgegeben.

**wird als Fett gedruckt**

wird so angezeigt:

wird als Fett gedruckt

ist dasselbe in HTML

<strong>rendered as bold text</strong>

Kursivschrift

Zum Hervorheben eines Textausschnitts mit Kursivschrift.

Der folgende Textausschnitts wird Kursiv angezeigt.

_wird Kursiv_

wird angezeigt als:

wird Kursiv

ist dasselbe in HTML:

<em>wird Kursiv</em>

Durchstreichung

Im GFM (GitHub flavored Markdown) kannst Du Durchstreichung wie folger erreichen.

~~durchgestrichener Text.~~

Wird so dargestellt:

durchgestrichener Text.

ist dasselbe wie in HTML:

<del>durchgestrichener Text.</del>

Block Zitat

Für Block Zitate von Inhalt von einer anderen Quelle.

Füge > vor jedem Text der als Bolck Zitat dargestellet werden soll.

> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

wird dargestellt als:

Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

und so ist der HTML Code:

<blockquote>
  <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>

Block Zitate können auch geschachtelt erstellet werden:

> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

wird dargestellet als:

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Notices

Die über die Menu Funktion erstellten Notzen unterscheiden sich etwas in der Darstellung von den mit Markdown erstellten Notizen. In der Folge wird immer zuerst ein Beispiel mit Markdown und anschliessend eines mit Shortcode abgebildet.

Es gibt vier Notzen Styles. Grundlegende Mengen von 3-Block-Zitat oder mehr produzieren Hinweise in 4 Farben:

Gelb

Martkdown

>>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

!Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
!odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

wird dargestellt als:

Martkdown

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

Rot

Martkdown

>>>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

!!Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
!!odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

wird dargestellt als:

Martkdown

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

Blau

Martkdown

>>>>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

!!!Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
!!!odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

wird dargestellt als:

Martkdown

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

Grün

Martkdown

>>>>>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

!!!!Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
!!!!odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

wird dargestellt als:

Martkdown

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

Shortcode

Listen

Ungeordnet

Eine Liste von Artikeln, bei denen die Reihenfolge der Artikel nicht von Bedeutung ist.

Sie können eines der folgenden Symbole verwenden, um Aufzählungszeichen für jedes Listenelement anzugeben.:

* valid bullet
- valid bullet
+ valid bullet

wird dargestellt als

+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem

wird dargestellt als:

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

das selbe in HTML

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Geordnet

Eine Liste von Elementen, für die die Reihenfolge der Elemente von besonderer Bedeutung ist.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

wird dargestellt als:

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

in HTML:

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

TIP: Wenn Du immer 1. für jede Zeile verwentest, wird Markdown automatisch die Nummer inkrementieren. Zum Beispiel:

1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem

wird dargestellt als:

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Code

Inline code

Umfasse Inline-Code-Snippets mit `.

In this example, `<section></section>` should be wrapped as **code**.

wird dargestellt als:

In this example, <section></section> should be wrapped with code.

HTML:

<p>In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped with <strong>code</strong>.</p>

Eingerückter Code

Oder rücken Sie mehrere Codezeilen um mindestens vier Leerzeichen ein, wie in:

  // Some comments
  line 1 of code
  line 2 of code
  line 3 of code

wird dargestellt als:

// Some comments
line 1 of code
line 2 of code
line 3 of code

HTML:

<pre>
  <code>
    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code
  </code>
</pre>

Block code "fences"

Verwende "fences" ``` in mehreren Codezeilen blockieren.

``` markup
Sample text here...
```

Sample text here...

HTML:

<pre>
  <code>Sample text here...</code>
</pre>

Tabellen

Tabellen werden erstellt, indem Sie Pipes als Trennzeichen zwischen den einzelnen Zellen hinzufügen und eine Zeile mit Bindestrichen (auch durch Balken getrennt) unter der Überschrift hinzufügen. Beachten Sie, dass die Rohre nicht vertikal ausgerichtet werden müssen.

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

wird dargestellt als:

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

dasselbe in HTML:

<table>
  <tr>
    <th>Option</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>data</td>
    <td>path to data files to supply the data that will be passed into templates.</td>
  </tr>
  <tr>
    <td>engine</td>
    <td>engine to be used for processing templates. Handlebars is the default.</td>
  </tr>
  <tr>
    <td>ext</td>
    <td>extension to be used for dest files.</td>
  </tr>
</table>

Rechts ausgerichteter Text

Durch Hinzufügen eines Doppelpunktes auf der rechten Seite der Striche unter einer beliebigen Überschrift wird der Text für diese Spalte rechtsbündig ausgerichtet.

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

Einfacher Link

[CircuitNet](http://www.circuitnet.ch)

wird dargestellt als (schwebt über den Link, es gibt keinen Tooltip):

CircuitNet

HTML:

<a href="http://www.circuitnet.ch">CircuitNet</a>

Soll ein Link in einem neuen Browser Tab geöffnet werden, so kann das wie folgt gemacht werden:

CircuitNet

HTML:

<a href="http://www.circuitnet.ch" target="_blank">CircuitNet</a>

Mit Title

[Upstage](https://github.com/upstage/ "Visit Upstage!")

wird dargestellt als (schwebt über den Link, es sollte einen Tooltip geben):

Upstage

HTML:

<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>

Benannte Anker

Mit benannten Ankern können Sie zum angegebenen Ankerpunkt auf derselben Seite springen. Zum Beispiel jedes dieser Kapitel:

# Inhaltsverzeichnis
  * [Chapter 1](#chapter-1)
  * [Chapter 2](#chapter-2)
  * [Chapter 3](#chapter-3)

springt zu diesen Abschnitten:

## Chapter 1 <a id="chapter-1"></a>
Content for chapter one.

## Chapter 2 <a id="chapter-2"></a>
Content for chapter one.

## Chapter 3 <a id="chapter-3"></a>
Content for chapter one.

NOTE Diese spezielle Platzierung des Anker-Tags scheint willkürlich zu sein. Sie sind hier inline platziert, da sie unauffällig zu sein scheinen, und es funktioniert.

Bilder

Bilder haben eine ähnliche Syntax wie Links, enthalten jedoch ein vorangestelltes Ausrufezeichen.

![Minion](http://octodex.github.com/images/minion.png)

oder

![Alt text](http://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Wie Links haben auch Bilder eine Syntax für Fußnoten

![Alt text][id]

Mit einem Verweis später im Dokument, das den URL-Speicherort definiert:

[id]: http://octodex.github.com/images/dojocat.jpg  "The Dojocat"