Skip to main content
We publish frequent updates to our documentation, and translation of this page may still be in progress. For the most current information, please visit the English documentation.

Schnellstart zum Schreiben auf GitHub

Hier erfährst du mehr zu Formatierungsfeatures durch Erstellen einer Infodatei für dein GitHub-Profil.

Einführung

Markdown ist eine leicht lesbare, einfach zu schreibende Sprache für die Formatierung von Nur-Text. Du kannst die Markdown-Syntax zusammen mit einigen HTML-Tags verwenden, um deine Eingaben auf GitHub zu formatieren, zum Beispiel in Infodateien von Repositorys und Kommentaren in Pull Requests und Issues. In diesem Leitfaden werden einige erweiterte Formatierungsfeatures behandelt, indem oder eine Infodatei für dein GitHub-Profil erstellt oder bearbeitet wird.

Wenn du mit Markdown noch nicht vertraut bist, solltest du mit Grundlegende Schreib- und Formatierungssyntax oder dem GitHub Skills-Kurs Kommunizieren mittels Markdown beginnen.

Wenn du bereits über eine Profilinfodatei verfügst, kannst du diesen Leitfaden befolgen und einige Features zu deiner vorhandenen Infodatei hinzufügen oder ein Gist mit einer Markdowndatei erstellen, das zum Beispiel about-me.md heißt. Weitere Informationen findest du unter Erstellen von Gists.

Erstellen oder Bearbeiten deiner Profilinfodatei

Mit der Profilinfodatei kannst du Informationen über dich selbst mit der Community über GitHub.com teilen. Die Infodatei wird oben auf der Profilseite angezeigt.

Wenn du noch keine Profilinfodatei besitzt, kannst du eine hinzufügen.

  1. Erstelle ein Repository mit demselben Namen wie deinen GitHub-Benutzernamen, und initialisiere das Repository mit einer README.md-Datei. Weitere Informationen findest du unter Verwalten der README für dein Profil.
  2. Bearbeite die README.md-Datei, und lösche den Vorlagentext (ab ### Hi there), der automatisch hinzugefügt wird, wenn du die Datei erstellst.

Wenn du bereits über eine Profilinfodatei verfügst, kannst du sie auf deiner Profilseite bearbeiten.

  1. Klicke oben rechts auf einer GitHub-Seite auf dein Profilfoto und dann auf Dein Profil.

  2. Klicke auf das neben deiner Profilinfodatei.

    Screenshot einer Profilseite mit hervorgehobenem Bleistiftsymbol neben der Profilinfodatei

Hinzufügen eines Bilds für deine Besucher*innen

Du kannst Bilder in deiner Kommunikation auf GitHub hinzufügen. Ganz oben in deiner Profilinfodatei fügst du ein reaktionsfähiges Bild ein, zum Beispiel ein Banner.

Mithilfe des HTML-Elements <picture> mit dem prefers-color-scheme-Medienfeature kannst du ein Bild hinzufügen, das sich ändert, je nachdem, ob eine Besucherin den hellen oder dunklen Modus verwendet. Weitere Informationen findest du unter Verwalten deiner Designeinstellungen.

  1. Kopiere das folgende Markup in deine README.md-Datei.

    HTML
    <picture>
     <source media="(prefers-color-scheme: dark)" srcset="YOUR-DARKMODE-IMAGE">
     <source media="(prefers-color-scheme: light)" srcset="YOUR-LIGHTMODE-IMAGE">
     <img alt="YOUR-ALT-TEXT" src="YOUR-DEFAULT-IMAGE">
    </picture>
  2. Ersetze die Platzhalter im Markup durch die URLs deiner ausgewählten Bilder. Alternativ kannst du die URLs aus unserem folgenden Beispiel kopieren, um das Feature zuerst zu testen.

    • Ersetze YOUR-DARKMODE-IMAGE durch die URL eines Bilds, das für Besucher*innen im dunklen Modus angezeigt werden soll.
    • Ersetze YOUR-LIGHTMODE-IMAGE durch die URL eines Bilds, das für Besucher*innen im hellen Modus angezeigt werden soll.
    • Ersetze YOUR-DEFAULT-IMAGE durch die URL eines Bilds, das angezeigt werden soll, falls keine anderen Bilder zugeordnet werden können, z. B. wenn der Besucher oder die Besucherin einen Browser verwendet, der das prefers-color-scheme-Feature nicht unterstützt.
  3. Um das Bild für Besucher*innen, die eine Sprachausgabe verwenden, zugänglich zu machen, ersetze YOUR-ALT-TEXT durch eine Beschreibung des Bilds.

  4. Um zu überprüfen, ob das Bild ordnungsgemäß gerendert wurde, klicke auf die Registerkarte Vorschau.

Weitere Informationen zur Verwendung von Bildern in Markdown findest du unter Grundlegende Schreib- und Formatierungssyntax.

Beispiel

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
</picture>

So sieht es aus

Screenshot der Registerkarte „Vorschau“ im hellen Modus mit einem Bild einer lächelnden Sonne

Hinzufügen einer Tabelle

Du kannst Markdown-Tabellen verwenden, um Informationen zu organisieren. Hier verwendest du eine Tabelle, um dich selbst vorzustellen, indem du zum Beispiel eine Rangfolge deiner am häufigsten verwendeten Programmiersprachen oder Frameworks erstellst, die Zeit angibst, bei welchen Themen du den größten Lernaufwand hattest oder deine Lieblingshobbys teilst. Wenn eine Tabellenspalte Zahlen enthält, ist es nützlich, die Spalte mithilfe der Syntax --: unterhalb der Kopfzeile rechts ausrichten.

  1. Kehre zur Registerkarte Bearbeiten der -Datei zurück.

  2. Um dich vorzustellen, füge zwei Zeilen unter dem Tag </picture> eine ## About me-Kopfzeile und einen kurzen Absatz über dich selbst hinzu, wie etwa im folgenden Beispiel.

    ## About me
    
    Hi, I'm Mona. You might recognize me as GitHub's mascot.
    
  3. Füge zwei Zeilen unterhalb dieses Absatzes eine Tabelle ein, indem du das folgende Markup kopierst und einfügst.

    Markdown
    | Rank | THING-TO-RANK |
    |-----:|---------------|
    |     1|               |
    |     2|               |
    |     3|               |
  4. Ersetze THING-TO-RANK in der Spalte auf der rechten Seite durch „Sprachen“, „Hobbys“ oder etwas anderes, und fülle die Spalte mit deiner eigenen Liste auf.

  5. Um zu überprüfen, ob die Tabelle ordnungsgemäß gerendert wurde, klicke auf die Registerkarte Vorschau.

Weitere Informationen findest du unter Organisieren von Informationen mit Tabellen.

Beispiel

## About me

Hi, I'm Mona. You might recognize me as GitHub's mascot.

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |

So sieht es aus

Screenshot der Registerkarte „Vorschau“ mit der Überschrift „About me“ und einer gerenderten Tabelle mit einer Liste von Sprachen

Erstellen eines reduzierten Abschnitts

Damit dein Inhalt übersichtlich bleibt, kannst du das Tag <details> verwenden, um einen erweiterbaren reduzierten Abschnitt zu erstellen.

  1. Um einen reduzierten Abschnitt für die von dir erstellte Tabelle zu erstellen, schließe deine Tabelle in <details>-Tags wie im folgenden Beispiel ein.

    HTML
    <details>
    <summary>My top THINGS-TO-RANK</summary>
    
    YOUR TABLE
    
    </details>
  2. Ersetze THINGS-TO-RANK zwischen den <summary>-Tags durch eine beliebige Rangposition in deiner Tabelle.

  3. Wenn du optional den Abschnitt standardmäßig als geöffnet anzeigen möchtest, füge das open-Attribut dem <details>-Tag hinzu.

    <details open>
    
  4. Um zu überprüfen, ob der reduzierte Abschnitt ordnungsgemäß gerendert wurde, klicke auf die Registerkarte Vorschau.

Beispiel

<details>
<summary>My top languages</summary>

| Rank | Languages |
|-----:|-----------|
|     1| Javascript|
|     2| Python    |
|     3| SQL       |
  
</details>

So sieht es aus

Screenshot der Registerkarte „Vorschau“ mit einem reduzierten Abschnitt namens „My top languages“, der durch einen Dropdownpfeil gekennzeichnet ist

Hinzufügen eines Zitats

Markdown verfügt über viele weitere Optionen zum Formatieren deiner Inhalte. Hier fügst du eine horizontale Regel hinzu, um deine Seite und ein Blockzitat zu teilen, um dein Lieblingszitat zu formatieren.

  1. Füge unten in der Datei zwei Zeilen unterhalb des </details>-Tags eine horizontale Regel hinzu, indem du drei oder mehr Bindestriche eingibst.

    ---
    
  2. Füge unterhalb der ----Zeile ein Zitat hinzu, indem du Markup wie folgt eingibst.

    > QUOTE
    

    Ersetze QUOTE durch ein Zitat deiner Wahl. Kopiere alternativ das Zitat aus unserem Beispiel unten.

  3. Um zu überprüfen, ob alles ordnungsgemäß gerendert wurde, klicke auf die Registerkarte Vorschau.

Beispiel

---
> If we pull together and commit ourselves, then we can push through anything.

— Mona the Octocat

So sieht es aus

Screenshot der Registerkarte „Vorschau“ mit einem eingezogenen Zitat unter einer dicken horizontalen Linie

Hinzufügen eines Kommentars

Du kannst die HTML-Kommentarsyntax verwenden, um einen Kommentar hinzuzufügen, der in der Ausgabe ausgeblendet wird. Hier fügst du einen Kommentar hinzu, um dich selbst daran zu erinnern, später deine Infodatei zu aktualisieren.

  1. Füge zwei Zeilen unterhalb der Kopfzeile ## About me mithilfe des folgenden Markups einen Kommentar ein.

    <!-- COMMENT -->
    

    Ersetze COMMENT durch ein „Aufgabenelement“, das dich daran erinnern soll, später etwas zu tun (z. B. der Tabelle weitere Elemente hinzufügen).

  2. Klicke auf die Registerkarte Vorschau, um zu überprüfen, ob dein Kommentar in der Ausgabe ausgeblendet ist.

Beispiel

## About me

<!-- TO DO: add more details about me later -->

Speichern der Arbeit

Wenn du mit deinen Änderungen zufrieden bist, speichere Profilinfodatei, indem du auf Änderungen committen klickst.

Wenn du direkt an den main-Branch committest, werden deine Änderungen allen Benutzer*innen auf deinem Profil angezeigt. Wenn du deine Arbeit speichern, sie jedoch noch nicht auf deinem Profil veröffentlichen möchtest, kannst du Neuen Branch für diesen Commit erstellen und Pull Request starten auswählen.

Screenshot des Abschnitts „Committen von Änderungen“

Nächste Schritte