GitHub AE ist derzeit begrenzt freigegeben.

Schnellstart zum Schreiben auf GitHub

In diesem Artikel

Hier erfährst du mehr zu Formatierungsfeatures durch Erstellen eines Gist zur Selbstbeschreibung.

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 ein Gist.

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

Einen Gist erstellen

Gists ermöglichen dir das Speichern oder Freigeben von Codeausschnitten und anderen Informationen für andere Personen unter dein Unternehmen. Um Formatierungsfeatures in Gists zu verwenden, füge eine Gist-Datei mit einer .md-Erweiterung hinzu.

  1. Navigiere zu deiner Gist-Homepage, http(s)://gist.[hostname].
  2. Gib optional eine Beschreibung für das Gist ein, z. B. „Über mich“.
  3. Gib about-me.md in das Feld Dateiname einschließlich Erweiterung... ein.

Weitere Informationen findest du unter Gists erstellen.

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

Du kannst Bilder in deiner Kommunikation auf GitHub hinzufügen. Ganz oben in deinem Gist 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 der Designeinstellungen.

  1. Kopiere das folgende Markup in deine about-me.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 für ein reaktionsfähiges Bild

<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 das Bild aus

Screenshot der Registerkarte „Vorschau“ eines GitHub-Kommentars im hellen Modus. Ein Bild einer lächelnden Sonne füllt den Kasten.

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 new -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 Informationen in Tabellen organisieren.

Beispiel für eine Tabelle

## About me

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

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

So sieht die Tabelle aus

Screenshot der Registerkarte „Vorschau“ eines GitHub-Kommentars. Unter der Überschrift „Über mich“ wird eine Tabelle mit einer Rangliste der Sprachen gerendert.

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 für einen reduzierten Abschnitt

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

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

</details>

So sieht der reduzierte Abschnitt aus

Screenshot der Registerkarte „Vorschau“ eines Kommentars. Links neben den Wörtern „Top languages“ befindet sich ein Pfeil, der anzeigt, dass der Abschnitt erweitert werden kann.

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 für ein Zitat

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

— Mona the Octocat

So sieht das Zitat aus

Screenshot der Registerkarte „Vorschau“ eines GitHub-Kommentars. Unterhalb einer dicken horizontalen Linie ist ein Anführungszeichen eingezogen.

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 deinen Gist 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 für einen Kommentar

## About me

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

Speichern der Arbeit

Wenn du mit deinen Änderungen zufrieden bist, speichere deinen Gist.

  • Klicke auf Geheimen Gist erstellen, um deinen Gist vor Suchmaschinen zu verbergen, ihn aber für alle sichtbar zu machen, mit denen du die URL teilst.
  • Wenn es für dich in Ordnung ist, wenn dein Gist von jedem auf dein Unternehmen gesehen werden kann, klicke auf Internen Gist erstellen.

Nächste Schritte