​
Codebeispiele hinzufügen

Sie können Inline-Code-Snippets oder Codeblöcke hinzufügen. Codeblöcke unterstützen Metaoptionen für Syntaxhervorhebung, Titel, Zeilenhervorhebung, Symbole und mehr.

​
Inline-Code

Um ein Wort oder eine Wortgruppe als Code zu kennzeichnen, schließen Sie es in Backticks (`) ein. 
To denote a `word` or `phrase` as code, enclose it in backticks (`).

​
Codeblöcke

Verwenden Sie abgegrenzte Codeblöcke, indem Sie Code in drei Backticks einschließen. Codeblöcke lassen sich kopieren, und wenn der Assistent aktiviert ist, können Nutzer die KI bitten, den Code zu erklären. Geben Sie die Programmiersprache für die Syntaxhervorhebung an und um Metaoptionen zu aktivieren. Fügen Sie nach der Sprache beliebige Metaoptionen wie einen Titel oder ein Icon hinzu.
HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

```java HelloWorld.java lines icon="java"
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

​
Optionen für Codeblöcke

Sie können Metaoptionen zu Ihren Codeblöcken hinzufügen, um deren Darstellung anzupassen.
Bevor Sie weitere Metaoptionen hinzufügen, müssen Sie zunächst die Programmiersprache für den Codeblock angeben.

​
Optionssyntax

  • String- und Boolean-Optionen: Mit "", '' oder ohne Anführungszeichen umschließen.
  • Ausdrucksoptionen: Mit {}, "" oder '' umschließen.

​
Syntaxhervorhebung

Aktivieren Sie die Syntaxhervorhebung, indem Sie die Programmiersprache direkt nach den öffnenden Backticks eines Codeblocks angeben. Wir verwenden Shiki für die Syntaxhervorhebung und unterstützen alle verfügbaren Sprachen. Die vollständige Liste der Sprachen finden Sie in der Shiki-Dokumentation. 
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

```java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

​
Titel

Fügen Sie einen Titel hinzu, um Ihr Codebeispiel zu kennzeichnen. Verwenden Sie title="Ihr Titel" oder eine Zeichenfolge in einer einzelnen Zeile.
Code Block Example
const hello = "world";

```javascript Code Block Example
const hello = "world";
```

​
Icon

Fügen Sie Ihrem Codeblock über die Eigenschaft icon ein Icon hinzu. Alle verfügbaren Optionen finden Sie unter Icons. 
const hello = "world";

```javascript icon="square-js"
const hello = "world";
```

​
Zeilenhervorhebung

Hebe bestimmte Zeilen in deinen Codeblöcken mit highlight hervor, indem du die entsprechenden Zeilennummern oder -bereiche angibst.
Beispiel zur Zeilenhervorhebung
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

```javascript Beispiel zur Zeilenhervorhebung highlight={1-2,5}
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

​
Zeilenfokus

Hebe bestimmte Zeilen in deinen Codeblöcken mit focus und Zeilennummern oder ‑bereichen hervor.
Line Focus Example
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

```javascript Line Focus Example focus={2,4-5}
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

​
Zeilennummern anzeigen

Blende Zeilennummern auf der linken Seite deines Codeblocks mit lines ein.
Show Line Numbers Example
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

```javascript Show Line Numbers Example lines
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

​
Ausklappbar

Ermöglichen Sie Nutzer:innen, lange Codeblöcke mit expandable ein- und auszuklappen.
Expandable Example
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

@dataclass
class Book:
    title: str
    author: str
    isbn: str
    checked_out: bool = False
    due_date: Optional[datetime] = None

class Library:
    def __init__(self):
        self.books: Dict[str, Book] = {}
        self.checkouts: Dict[str, List[str]] = {}  # patron -> list of ISBNs

    def add_book(self, book: Book) -> None:
        if book.isbn in self.books:
            raise ValueError(f"Book with ISBN {book.isbn} already exists")
        self.books[book.isbn] = book

    def checkout_book(self, isbn: str, patron: str, days: int = 14) -> None:
        if patron not in self.checkouts:
            self.checkouts[patron] = []

        book = self.books.get(isbn)
        if not book:
            raise ValueError("Book not found")

        if book.checked_out:
            raise ValueError("Book is already checked out")

        if len(self.checkouts[patron]) >= 3:
            raise ValueError("Patron has reached checkout limit")

        book.checked_out = True
        book.due_date = datetime.now() + timedelta(days=days)
        self.checkouts[patron].append(isbn)

    def return_book(self, isbn: str) -> float:
        book = self.books.get(isbn)
        if not book or not book.checked_out:
            raise ValueError("Book not found or not checked out")

        late_fee = 0.0
        if datetime.now() > book.due_date:
            days_late = (datetime.now() - book.due_date).days
            late_fee = days_late * 0.50

        book.checked_out = False
        book.due_date = None

        # Remove from patron's checkouts
        for patron, books in self.checkouts.items():
            if isbn in books:
                books.remove(isbn)
                break

        return late_fee

    def search(self, query: str) -> List[Book]:
        query = query.lower()
        return [
            book for book in self.books.values()
            if query in book.title.lower() or query in book.author.lower()
        ]

def main():
    library = Library()

    # Add some books
    books = [
        Book("The Hobbit", "J.R.R. Tolkien", "978-0-261-10295-4"),
        Book("1984", "George Orwell", "978-0-452-28423-4"),
    ]

    for book in books:
        library.add_book(book)

    # Checkout and return example
    library.checkout_book("978-0-261-10295-4", "patron123")
    late_fee = library.return_book("978-0-261-10295-4")
    print(f"Late fee: ${late_fee:.2f}")

if __name__ == "__main__":
    main()

```python Expandable Example expandable
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

# ...

if __name__ == "__main__":
    main()
```

​
Zeilenumbruch

Aktiviere den Zeilenumbruch für lange Zeilen mit wrap. Das verhindert horizontales Scrollen und macht lange Zeilen leichter lesbar.
Wrap Example
const greeting = "Hello, World! I am a long line of text that will wrap to the next line.";
function sayHello() {
  console.log(greeting);
}
sayHello();

```javascript Wrap Example wrap
const greeting = "Hello, World! I am a long line of text that will wrap to the next line.";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

​
Diff

Zeige einen visuellen Diff für hinzugefügte oder entfernte Zeilen in deinen Codeblöcken. Hinzugefügte Zeilen werden grün, entfernte Zeilen rot hervorgehoben. Um Diffs zu erstellen, füge diese speziellen Kommentare am Zeilenende in deinem Codeblock hinzu:
  • // [!code ++]: Markiert eine Zeile als hinzugefügt (grün hervorgehoben).
  • // [!code --]: Markiert eine Zeile als entfernt (rot hervorgehoben).
Für mehrere aufeinanderfolgende Zeilen gib die Anzahl nach einem Doppelpunkt an:
  • // [!code ++:3]: Markiert die aktuelle Zeile plus die nächsten zwei Zeilen als hinzugefügt.
  • // [!code --:5]: Markiert die aktuelle Zeile plus die nächsten vier Zeilen als entfernt.
Die Kommentarsyntax muss zu deiner Programmiersprache passen (zum Beispiel // für JavaScript oder # für Python).
Diff Example
const greeting = "Hello, World!"; 
function sayHello() {
  console.log("Hello, World!"); 
  console.log(greeting); 
}
sayHello();

```js Diff Example icon="code" lines
const greeting = "Hello, World!"; // [!code ++]
function sayHello() {
  console.log("Hello, World!"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```