Code-Blöcke erstellen und markieren

Gib Codebeispiele mit Fenced-Code-Blöcken frei, und aktiviere die Syntaxmarkierung.

Wer kann dieses Feature verwenden?

Markdown kann auf der Webbenutzeroberfläche von GitHub verwendet werden.

In diesem Artikel

Umgrenzte Codeblöcke

Um umgrenzte Codeblöcke zu erstellen, platzierst du dreifache Graviszeichen ``` vor und hinter dem Codeblock. Wir empfehlen, eine leere Zeile vor und nach den Codeblöcken einzufügen, damit die Rohformatierung besser lesbar ist.

```
function test() {
  console.log("notice the blank line before this function?");
}
```

Screenshot des gerenderten GitHub-Markdowns, der zeigt,wie dreifache Backticks Codeblöcke in Rohformatierung wiedergeben. Der Block beginnt mit „function test() {.“

Tip

Um die Formatierung in einer Liste beizubehalten, musst du darauf achten, die nicht umgrenzten Codeblöcke um acht Leerzeichen einzuziehen.

Um dreifache Graviszeichen in einem umgrenzten Codeblock anzuzeigen, musst du sie in vierfache Graviszeichen einschließen.

````
```
Look! You can see my backticks.
```
````

Screenshot des gerenderten GitHub-Markdowns, der zeigt, wie vierfache Backticks dazu führen, dass dreifache Backticks um einen Codeblock herum sichtbar bleiben. Der Block lautet: „Schau! Die Backticks werden angezeigt.“

Wenn du häufig Codeausschnitte und Tabellen bearbeitest, profitierst du möglicherweise von der Aktivierung einer Schriftart mit fester Breite in allen Kommentarfeldern auf GitHub. Weitere Informationen finden Sie unter Informationen zum Schreiben und Formatieren bei GitHub.

Syntaxhervorhebung

Du kannst einen optionalen Sprachkennzeichner hinzufügen, um die Syntaxmarkierung im Fenced-Code-Block zu aktivieren.

Die Syntaxhervorhebung ändert die Farbe und den Stil des Quellcodes, damit er leichter lesbar ist.

So sieht z. B. die Syntaxmarkierung des Ruby-Codes aus:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

Dadurch wird der Codeblock mit Syntaxhervorhebung angezeigt:

Screenshot mit drei Zeilen Ruby-Code, wie er in GitHub angezeigt wird. Elemente des Codes werden in violetter, blauer und roter Schrift angezeigt, um die Lesbarkeit zu erhöhen.

Wir verwenden Linguist zum Ausführen der Spracherkennung und zum Auswählen von Grammatiken von Drittanbietern für die Syntaxhervorhebung. Die gültigen Schlüsselwörter findest du in der YAML-Datei der Sprache.

Erstellen von Diagrammen

Du kannst auch Codeblöcke verwenden, um Diagramme in Markdown zu erstellen. GitHub unterstützt Mermaid-, GeoJSON-, TopoJSON- und ASCII STL-Syntax. Weitere Informationen finden Sie unter Erstellen von Diagrammen.

Weitere Informationsquellen