Markdown

title: Markdown

Markdown

Was ist Markdown

Markupdown ist ein Versuch dem Autor beim Schreiben dabei zu helfen, sich auf das Wesentliche zu konzentrieren.

Markdown-Editoren

Grundsätzlich kann mit jedem Texteditor Markdown-Text erstellt werden, denn schließlich handelt es sich immer um eine pure Textdatei ("Plain Text")

Jedoch ist es angenehmer, wenn die Syntax hervorgehoben wird (Highlightning) und das formatierte Ergebnis in einer Vorschau kontrolliert werden kann. Beides ermöglichen spezielle Editoren bzw. Erweiterungen in Standardeditoren, wie z. B. in Atom.

Die meisten Editoren können mittels Plugin um eine MarkDown-Vorschau-Funktionalität erweitert werden, z. B. auch Notepad++.

Notepad++

Für den beliebten Editor Notepad++ gibt es eine Markdown-Erweiterung, welche eine visuelle Vorschau des formatierten Ergebnisses sowie Exportfunktionen mitbringt.

Visual Studio Code

Microsoft Visual Studio Code ermöglicht auch ein angenehmes Arbeiten inkl. visueller Vorschau von Markdown-Dateien. Ein Vorschaufenster öffnet man mit Strg+Umsch+V um. Ein Vorschaufenster neben dem Codefenster aktiviert man durch Strg+K V Zahlreiche Erweiterungen für Visual Code vergrö0ern die Möglichkeit von Markdown in Visual Studio Code.

WriteMonkey

Für ablenkungsfreies Arbeiten optimiert und - wenn gewünscht - mit der Akustik diverser Schreibmaschinen ist WriteMonkey.

Content Management mit Markdown

Markdown ist optimal geeignet um Notizen zu erstellen auf die von verschiedenen Geräten mit diversen Anwendungen zugegriffen werden soll. Das Erstellen kann quasi mit jedem Texteditor erfolgen.

Falls diese Notizen auf eine Webseite gebracht werden sollen, so kann man

  • mit einem Konverter, z. B. pandoc aus den Markdown-Dateien html-Dateien konvertieren
  • ein CMS nutzen, dass Seiteninhalte als Markdown-Dateien ablegt, wie dies z. B. GRAV tut.

Markdown in GRAV

Formatierungen

Einfache Textauszeichnungen / Textformatierungen

Text kann fett kursiv oder auch fett und kursiv hervorgehoben sein. Alle Textauszeichnungen lassen sich kombinieren. Text kann durchgestrichen aber - zumindest in der GitHub Syntax, keine Unterstreichung.

  • Dieser Text ist kursiv, genau wie dieser.
  • Dieser Text ist fett, genau wie dieser.
  • Dieser Text ist beides, dieser auch!, und dieser genau so!

  • Dieser Text wird durchgestrichen dargestellt.\

Absatzende und Zeilenende

Das ist ein Absatz.

Einen neuen Absatz beginnt man einfach, indem man eine Leerzeile voranstellt. Hier ist dann immer noch Absatz 2! Eine neue Zeile bewirkt weder eine neue Zeile noch einen neuen Absatz.

Erst nach einer Leerzeile beginnt ein neuer Absatz!

Zeilenschaltung innerhalb eines Absatzes

Wenn man innerhalb eines Absatzes\ eine Zeilenschaltung möchte,\ dann beendet man die Zeile\ mit zwei Leerzeichen\ Über mir werden wohl die zwei Leerzeichen durch `
` ersetzt! ### Überschriften Viele Auszeichnungen können auf verschiedene Arten vorgenommen werden. Überschriften der höchsten Ebene können z. B. durch eine Doppellinie unter der Überschrift oder aber durch ein vorangestelltes # ausgezeichnet werden. # Das ist eine `

` # Auch das ist eine h1

Das ist eine <h2>

auch das ist eine h2

Das ist eine <h3>

Das ist eine <h4>

Das ist eine <h5>
Das ist eine <h6>

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6

Horizontale Linie

`***` erzeugt (wie `
`) eine horizontale Linie --- --- Das Markdown-Element \--- erzeugt eine Linie, deren Aussehen, sich vom html-Element < hr > unterscheiden kann - aber nicht muss.
--- ## Maskieren Ich würde *diesen Teil gerne mit Sternen umschließen*, doch ohne dass er kursiv wird. Also mache ich folgendes: \*Ich umschließe diesen Text mit Sternen\*! ## Bilder ![Optionaler Alternativtext, falls sich das Bild nicht laden lässt](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/416px-Markdown-mark.svg.png)) ![Lindner Agentur-Logo](http://agentur-lindner.com/files/2014/09/agentur-lindner-googleplus-banner-2013.png "Logo von Lindner Agentur") ## Listen

Aufzählung

  • Beginn einer Aufzählung
    mit einer Zeilenschaltung
  • Punkt auf der Liste
  • Punkt auf der Liste
  • Anderer Punkt auf der Liste

oder

  • Punkt auf der Liste
  • Punkt auf der Liste
  • Noch ein Punkt auf der Liste

oder

  • Punkt auf der Liste

  • Punkt auf der Liste

  • Ein letzter Punkt auf der Liste

  • können mit einem Bindestrich -

  • oder einem *

  • oder einem +

  • begonnen werden.

    • und natürlich geht es auch tiefer
    • und noch tiefer
    • und wieder zurück

  • Wichtig ist allerdings auch hier die Leerzeile oberhalb!

Nummerierte Listen (Aufzählungen)

  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei
  1. Punkt eins
  2. Punkt zwei
  3. Punkt drei
  1. Punkt eins
  2. Punkt zwei
    1. sdfsdfsd
    2. sdfsdf
      1. dfsdf
      2. fdsfsd
      3. sdfsdf
  3. Punkt drei
    • Unterpunkt
    • Unterpunkt
  4. Punkt vier
  5. Beginnen mit einer Ziffer, gefolgt von einem .
  6. und es folgt eine Ziffer
  7. wobei die Ziffern natürlich ersetzt undautomatisch richtig nummeriert werden.
  8. Um nicht zu verwirren, beginne ich nummerierte Listen immer mit 0.
  9. Unterpunkte sind möglich - einfach einrücken.
    1. auch die Unterpunkte werden fortlaufend nummeriert.
    2. Und es geht natürlich weiter...
    3. ... und tiefer! 0. und noch tiefer
    4. Die fortlaufende Nummerierung erfolgt automatisch.
    5. Und zwar auf allen Ebenen.

Code-Blöcke

<html>
<head>
    <title> Dies ist der Titel </title>
</head>
<body>
<p>Codeblöcke werden durch ein ~~~ in der Zeile davor und danach ausgezeichnet. 
Danach sollte die Syntax bezeichnet werden, z. B. txt, sh, html, css usw.</p>
</body>
</html>

Code-Bereiche

Um einen Code-Bereich zu markieren, wird er mit Backtick-Zeichen umschlossen (`). Im Gegensatz zu einem Code-Block formatiert ein Code-Bereich Code innerhalb eines normalen Absatzes:\ Dieser Bereich beinhaltet inline code und normalen Text. Das Backtick-Zeichen erhält man auf der deutschen Tastatur mit Umschalt + ´ gefolgt von einem Leerzeichen.

Vorformatierter Text

werden eine Leerzeile und 4 Leerzeichen vor
dem Beginn eines Textes gesetzt,

--------------------------
...so wird dieser        |
|   genau so ,,,, wie    |
|   eingegeben, auch     |
|             angezeigt, |
--------------------------

Zitate

Das ist ein Zitat. Du kannst Zeilenumbrüche entweder manuell hinzufügen und ein > vor jeder Zeile einfügen, oder du kannst deine Zeilen einfach immer länger und länger werden lassen, die Umbrüche werden dann automatisch erzeugt. Solange sie mit einem > beginnen, macht das keinen Unterschied. Auch möglich ist es, den Text

mehrstufig einzurücken.

das geht natürlich noch weiter

Nicht schlecht, oder?

Ein der Zeile vorgestelltes > leitet ein Zitat ein. Zitate können mehrere Zeilen umfassen, wobei jede Zeile mit einem > beginnen kann. Der Umbruch in der Darstellung wird unabhängig vom\ Umbruch im Dokument vorgenommen.

Beginnt eine Zeile mit >> wird das Zitat eine Ebene tiefer eingerückt. Zwischen den > ist kein Leerzeichen erforderlich.

Zitate können auch Überschriften oder andere MarkDown-Elemente beinhalten, wie z. B. hier:

Dies ist eine Überschrift.

  1. Dies ist der erste Listenpunkt.
  2. Dies ist der zweite Listenpunkt.\ Hier ist ein wenig Beispiel-Code:\ return shell_exec("echo $input | $Markdown_script");\ Das > Zeichen muss nicht vor jeder Zeile stehen, es genügt völlig, wenn jeder Absatz damit beginnt. Man kann also auch längere Absätze mit nur einem > am Anfang als ein (mehrzeiliges) Zitat formatieren.
  • Entsprechendes gilt ja auch für Aufzählungen und Listenpunkte. Auch diese können natürlich mehrere Zeilen lang sein.

Tabellen

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.

| Spalte1 | Spalte2 | Spalte3 | | :----------- | :------: | ------------: | | linksbündig | mittig | rechtsbündig | | blah | blah | blah |

Spalte1 | Spalte2 | Spalte3 :-- | :-: | --: Ganz schön hässlich | vielleicht doch lieber | wieder aufhören

Spalte 1 | Spalte 2 | Spalte 3 :-|:-:|-: linksbündiger Text |zentrierte Spalten sind natürlich auch möglich und natürlich kann der Text in einer Spalte auch länger sein. Es sieht dann halt so aus, wie es aussieht. |ebenso rechtbündiger Text

| Name | Vorname | Geburtstag | Gewicht | |----------------|--------------|:----------:|---------:| | Lindner | Julian | 2009-05-07 | 32 kg | | Lindner | Melina | 11.1.11 | 22.5 kg | | Müller | Horst | 5.3. | 115,9 kg | | linksbündig | auch das ist linksbündig | das ist zentriert | und das rechtsbündig |

Zitate

Blockzitate müssen mit einer Leerzeile beginnen und enden

Jede Zeile des Zitats beginnt mit einer rechten spitzen Klammer und einem Leerzeichen

Ein Zitat kann eine oder mehrere Zeilen umfassen. Es wird einfach durch ein > am Zeilenanfang als Zitat gekennzeichnet. In einem Zitat sind auch Aufzählungen möglich

  • zum Beispiel so
  • oder so

HTML

Im Text kann auch html eingebunden werden, wenn jemand z. B. gar nicht auf Unterstreichungen verzichten kann, oder eine Tabelle benötigt wird:

Überschrift einer Tabellenzelle zweite Spalte
Inhalt noch mehr Inhalt

Links und Verweise

Klick mich!

Klick mich!

Zu meiner Musiksammlung.

[Klick mich][link1], um mehr über mich herauszufinden! [Hier kannst du auch mal draufklicken][foobar], wenn es dich interessiert.

[Das][] ist ein Link.

Das ist das alt-Attribut für mein Bild

![Das ist das alt-Attribut][meinbild]

http://testwebseite.de/ ist das selbe wie http://testwebseite.de/

Links und Verweise

Anzeigetext für Link

Weblinks werden automatisch erkannt wenn http:// oder https:// davor steht, https://google.com. Natürlich kann man auch einen Beschreibungstext mit einer URL verlinken, wie hier bei diesem Weblink.

Weblink-Referenzen

I get 10 times more traffic from Google than from Yahoo or MSN.

Definition Lists

Apple : Pomaceous fruit of plants of the genus Malus in the family Rosaceae.

Code mit Syntax Highlightning

Programmcode 

Das ist Quellcode
Das hier auch
my_array.each do |item|
    puts item
end
## Eine andere Möglichkeit einen Codeblock zu erzeugen.
ruby 
def foobar
    puts "Hallo Welt!"
end
<!-- Schöne Formatierung von html, sowohl im Editor als auch in der Vorschau -->
<html>
    <head>
        <title>
          Diesem html-Code wurde ein ```html vorangestellt.
        </title>
    </head>

    <body>
        <content>
            <h1>Hello World</h1>
        </content>
    </body>
</html> <!-- und danach kommt noch ein ``` -->

PHP

<!-- Es folgt php Code-->
<?php
  // so sieht ein php Kommentar aus
  phpinfo(); // oder so
  echo "Diesem php-Code wurde ein ```php vorangestellt.";
?>

CSS

<!-- Auch CSS wird schön formatiert -->
body    {font-family: sans-serif;}
h1      {font-size: 1.6rem;}
p       {margin: 1rem;}

Mermaid

Mermaid ermöglicht einfach Diagramme zu erstellen, siehe https://github.com/mermaid-js/mermaid

gantt
section Gantt-Diagramm
Beendet :done,    des1, 2014-01-06,2014-01-08
Aktiv        :active,  des2, 2014-01-07, 3d
Parallel 1   :active,  des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
pie
"Webdesign" : 800
"Beratung" : 450
"Dienstleistung" : 900
"Drucksachen" : 1180
graph TD
A[Boss] --- B(Bereich Nord)
B ---|Finanzen| D[UK]
B ---|Two| E[fa:fa-clock Personal]
B ---|Three| F[fa:fa-car IT]
C -.->|dieser Text ist wichtig|D
A[Boss] --- C(Bereich Süd)
C --- G[fa:fa-car IT]
graph LR
    A(Linke Box)-->B(asd Box)
    B(Mitte)---C(Rechte Box)
    A(oben)-- Text auf der Verbindung-->C(unten)
    A(Linke Box)-->D(unten mitte)

Inlinecode

Beispiel für Inlinecode. Hermann hatte nicht die leiseste Ahnung, was diesesgo_to()\ bedeuten könnte!

Konvertieren von Markdown in andere Formate

(Nicht nur) Markdown-Dokumente können mit Pandoc von und zu Office Formaten (RTF, Word und Open Office), DocBook, html, LaTex, InDesign, DokuWiki markup, EPUB, PDF und vielen weiteren umgewandelt werden.

Pandoc ist auch sehr gut geeignet um z. B. mittels reveal.js ansprechend gestaltete Präsentation aus Markdown-Quellen zu erstellen.

Zum Beispiel wandelt man dieses Dokument mit...

pandoc "Markdown.md" -s -o "Markdown.html"

...in html um. (Das -s bewirkt das Einlesen als utf-8 Datei). Oder man wandelt in .pdf (Allerdings muss hierzu LaTeX und diverse pdf-Bibliotheken installiert sein) um mit:

pandoc "Notizen zu Markdown-Text.md" -s -o "Markdown-Notizen.pdf"

Mittels DokuWiki-Markup kann eine Markup-Quelle in das Dokuwiki-Format konvertiert werden:

pandoc "Notizen zu Markdown-Text.md" -s -o "Markdown-Notizen.txt" -w dokuwiki

Das Ergebnis der Konvertierung ist auf meiner Wiki-Seite zu Markdown eingebunden.

Und selbstverständlich kann man auch eine Dokuwiki-Seite in Markdown konvertieren:

pandoc "Dokuwiki.txt" -s -o "Dokuwiki.md"

Auf https://github.com/jgm/pandoc/wiki/User-contributed-templates befinden sich Pandoc Template-Erweiterung für viele weitere Konvertierungen, z. B. Bootstrap, E-Books, Bootstrap (2.x)

Literaturverzeichnis