Code Blocks

Display code with optional syntax highlighting

Code Block Example

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

Basic Code Block

Use fenced code blocks by enclosing code in three backticks.

helloWorld();

```
helloWorld();
```

Syntax Highlighting

Put the name of your programming language after the three backticks to get syntax highlighting.

We use Prism for syntax highlighting. Test Drive Prism lists all the languages supported.

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!");
    }
}
```

Names

Add a title after the programming language to set the name of your code example. The text can be anything as long as its all in one line.

Code Block Example

const hello = "world";

Code Block Example

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

Line Highlighting

Highlight specific lines in your code blocks by adding a special comment after the language identifier. Use curly braces {} and specify line numbers or ranges separated by commas.

Line Highlighting Example

const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();

```javascript Line Highlighting Example {1,3-5}
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

Expandable

If you have a long code block and [expandable] after your title to make it close and expand.

library.py

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()

```javascript Expandable Example [expandable]
const greeting = "Hello, World!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

Code Groups

Want to display multiple code examples in one code box? Check out the Code Group docs:

Code Group

Read the reference for the Code Group component