Lerne Coding
Wie man Github Readmes mit Markdown schreibt!

Markdown Guide für Github und Co.

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGeschätzte Lesezeit ca. Minuten

Markdown ist eine vereinfachte HTML Schreibweise, welche von einem Interpreter später zu HTML konvertiert wird. Durch die einfache Schreibweise ist es leichter ein allgemeines Stylesheet einzuhalten und einfacher zu bearbeiten. Zudem können Elemente wie Bilder oder Tabellen schneller als mit HTML erstellt werden, weshalb es gerne bei größeren Dokumentationen oder Blogartikeln (so wie diesem) verwendet wird. Die jeweiligen Markdown Ausdrücke, sind zu HTML identisch, Grundkenntnisse in HTML sind also für diesen Beitrag vorteilhaft, werden aber nicht vorausgesetzt.

Überschriften

Überschriften werden mit einem # und danach einem Leerzeichen angegeben. Für die Hauptüberschrift kannst du ein Rautenzeichen verwenden, wenn du Unterüberschriften erstellen möchtest, kannst du zwei oder drei Rautenzeichen verwenden. Je mehr Rautenzeichen du hintereinander schreibst, desto kleiner wird deine Überschrift. Mehr als 4 Rauten hintereinander sind aber meistens sinnlos, da man danach keinen Unterschied mehr erkennt. Ein Rautenzeichen entspricht einer h1-Überschrift, zwei einer h2-, und drei einer h3-Überschrift - insgesamt geht es bis zu h6, also 6-mal das Rautenzeichen.

# <h1> Überschrift
## <h2> Überschrift
### <h3> Überschrift
#### <h4> Überschrift
Überschriften Markdown
Überschriften Markdown

Listen können einfach wie bei Word mit einem - erstellt werden. Eine Einkaufsliste mit Markdown könnte so aussehen:

- Milch
- ## Eier
- Käse
- # Pizza
- Milch
  - Milch
    - Milch
      - Milch
  - Milch
    - Milch- Milch
- ## Eier
- Käse
- # Pizza- Milch
- ## Eier
- Käse
- # Pizza- Milch
- ## Eier
- Käse
- # Pizza
Listen
Listen

Listen müssen nicht nur Text sein, sie können auch Links, Bilder oder Über- und Unterüberschriften sein. Zudem werden mit einem Tab eingerückte Listenelemente zu Unterpunkten.

Checkboxen

Manchmal möchte man eine Liste mit Dingen erstellen, die aktuell schon funktionieren oder noch nicht. Dafür werden gerne Checkboxen verwendet. Diese bestehen aus eckigen Klammern, welche entweder ein Leerzeichen oder bei Erfüllung ein x enthalten. Wie bei Listen können mit dem Einrücken von Elementen Unterpunkte erstellt werden.

## Einkaufsliste
- [x] Milch
    - [x] Eier
        - [x] Butter
- [ ] Brot
Checkboxen Markdown
Checkboxen Markdown

Links

Wenn du einen Link angeben möchtest, kannst du diesen als Rohtext eingeben und er wird automatisch anklickbar sein, jedoch möchte man diesen meistens verschönern, indem man einen alternativen Text oder ein Bild anklickbar macht. Dieser wird in eckigen und die URL anschließend in Runden Klammern geschrieben.

https://wwww.google.com
oder
[Google](https://wwww.google.com)
oder
<a href="https://wwww.google.com">Google</a>
Links in Markdown
Links in Markdown

Bilder

Bei Bildern ist es ähnlich wie mit Links. Dafür gibst du erst ein Ausrufezeichen an, dann den alternativen Text und dann die Quelle. Quellen können vollständige URLs sein die auf einem Webserver liegen, aber auch Bilder, welche in einem Unterordner liegen und eine dynamische Pfadangabe bekommen.

<img alt="schönes Bild" src="https://avatars2.githubusercontent.com/u/53957681?s=460&u=68dab87193fe05690a01e1cf6226a8069ca4ec75&v=4">

oder  

![schönes Bild](https://avatars2.githubusercontent.com/u/53957681?s=460&u=68dab87193fe05690a01e1cf6226a8069ca4ec75&v=4)

oder

<img alt="schönes Bild" src="https://eample.com">

oder  

![schönes Bild](https://eample.com)
Bild Markdown
Bild Markdown

Tabellen

Für Tabellen benutzt man, ähnlich wie bei CSV Dateien, | (eng.: Pipe) als Trennzeichen. Es ist eine Textdarstellung einer Tabelle mit dem Kopf oben und die jeweiligen Zellen unten. Die Trennzeichen müssen nicht genau untereinander liegen, es sieht aber schöner aus.

| Header 1 | Header 2 |
|----------|----------|
| Zelle 1  | Zelle 2  |
| Zelle 3  | Zelle 4  |
Tabelle Markdown
Tabelle Markdown

In Tabellen können auch Links und Bilder verwendet werden.

| Header 1 | Header 2 |
|----------|----------|
| ![Bild 1](https://avatars2.githubusercontent.com/u/53957681?s=460&u=68dab87193fe05690a01e1cf6226a8069ca4ec75&v=4)  | <img alt="schönes Bild" src="https://avatars2.githubusercontent.com/u/53957681?s=460&u=68dab87193fe05690a01e1cf6226a8069ca4ec75&v=4"> |
| [Quelle 1](https://avatars2.githubusercontent.com/u/53957681?s=460&u=68dab87193fe05690a01e1cf6226a8069ca4ec75&v=4) | <a href="https://avatars2.githubusercontent.com/u/53957681?s=460&u=68dab87193fe05690a01e1cf6226a8069ca4ec75&v=4">Quelle 2</a>         |
Tabelle Bilder und Links
Tabelle Bilder und Links

Zeilenumbrüche

Solltest du in einer normalen Datei ein Leerzeichen machen, so werden diese nicht unbedingt in der Markdown Sprache übernommen, da sie auch zur besseren Strukturierung der Datei genutzt werden. Deshalb musst du für einen neuen Absatz entweder zwei Leerzeilen machen, oder du machst am Ende der Zeile zwei Leerzeichen ohne etwas dahinter. Das wird automatisch als <br> (Zeilenumbruch) in HTML gedeutet.

Hello World

Da ist Text

Programmcode formatieren

Solltest du Codebeispiele in dein Markdown schreiben, dann kannst du diese in einer Programmiersprache optisch anpassen, damit die Syntax besser lesbar ist. Dafür schreibst du am Anfang und am Ende des Codes drei ` (Backtick) und hinter den ersten Backticks ohne Leerzeichen den Namen der Programmiersprache in Kleinbuchstaben.

```php
<?php
function print_hello_world() {
	echo "Hello World";
}
?>
```

```java
public static void printHelloWorld() {
	System.out.println("Hello World");
}
```

```javascript
function print_hello_world () {
	return "Hello World"; 
}
```

```c
void print_hello_world() {
	printf("Hello World");
}
```

```python
def print_hello_world():
	print("Hello World");
```
Programm Code Markdown
Programm Code Markdown

Einzelne Begriffe hervorheben

Schonmal gefragt wie man Begriffe hervorhebt? Ähnlich wie bei den Codebeispielen, kann man auch mitten im Satz jeweils einen Backtick vor und einen nach einem Wort oder nach mehreren Wörtern schreiben, um das Wort / die Wörter hervorzuheben.

Schonmal gefragt wie man `Begriffe` hervorhebt?
Wie man Begriffe Hervorhebt - Markdown Github Beispiel
Wie man Begriffe Hervorhebt - Markdown Github Beispiel

Emojis

Emojis können von Emojipedia oder vom GitHub Emoji Cheat-sheet kopiert werden.

Da Markup meistens in HTML konvertiert wird, kann man auch normales HTML verwenden. Ich rate aber sich so lange es geht an den Standard zu halten, um mögliche Fehler zu verhindern.

Emoji Github Markdown
Emoji Github Markdown

Badges

Wenn du diese coolen Sticker in deiner Readme Datei haben willst, die aktiv einen Status abfragen oder nur etwas anzeigen sollen, dann kannst du die Templates von Naereen verwenden. Diese können alternativ auf der Seite Shields.io erstellt werden

Shields Badges
Shields Badges

Variablen

Gerade, wenn man längere Markup Dateien erstellen möchte, können diese unter anderem durch viele Links schnell unlesbar werden. Um dem entgegenzuwirken, kannst Variablen für URLs (Links, Bilder oder Weiterleitungen) verwenden und diese am Ende der Datei definieren.

Variablen in Links und Bildern erkennt man daran, dass sie in eckigen anstatt in runden Klammern geschrieben werden. Ob du die Variablen am Anfang oder am Ende des Dokuments definierst, ist egal. Schreibe dazu den Variablennamen in eckigen Klammern und dahinter ein Doppelpunkt. Gebe danach die URL an.

<!-- Badges -->
[![Discord][discordshield]][hellocodingdiscordinvite]

<!-- Beschreibung -->
- 💬 [Join our Forum][hellocodingdiscordinvite]

<!-- Logo -->
![hellocoding-logo][hellocodinglogo]

<!-- Links definieren -->
[hellocodingdiscordinvite]: https://discord.gg/c3ryK7e
[hellocodinglogo]: https://hellocoding.de/images/page-logo/hellocoding-logo.svg
[discordshield]: https://img.shields.io/discord/530141674463035402?label=HelloCoding%20Discord&logo=Discord&logoColor=%23ffffff&style=flat-square

Warum sollte ich Markdown lernen?

Markdown wird gerne für Dokumentationen verwendet, weil damit schnell und einfach HTML generiert werden kann, ohne, dass einen Webentwickler diese implementieren muss. Es wird unter anderem bei HelloCoding und weiteren Blogs eingesetzt. Je nach Parser, solltest du Markdown in eigenen Projekten verwenden, gibt es verschiedene Dialekte mit Zusatzfunktionalitäten.

Bildquelle - Vielen Dank an die Ersteller:innen für dieses Bild
Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Wie man Github Readmes mit Markdown schreibt!"!

Kommentar schreiben

Verwante Beiträge
close