Format code

Format code in your documentation with syntax highlighting, line numbers, diffs, copy buttons, and interactive code group features in MDX.

You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.

To denote a word or phrase as code, enclose it in backticks (`).

To denote a `word` or `phrase` as code, enclose it in backticks (`).

Use fenced code blocks by enclosing code in three backticks. Code blocks are copyable, and if you have the assistant enabled, users can ask the assistant to explain the code.

Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.

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

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

Add meta options to your code blocks to customize their appearance.

• String and boolean options: Wrap with "", '', or no quotes.
• Expression options: Wrap with {}, "", or ''.

Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.

Mintlify uses Shiki for syntax highlighting and supports all available languages. See the full list of languages in Shiki's documentation.

Customize code block themes globally using styling.codeblocks in your docs.json file. Set simple themes like system or dark, or configure custom Shiki themes for light and dark modes. See Settings for configuration options.

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

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

{
  "styling": {
    "codeblocks": {
      "languages": {
        "custom": ["/languages/my-custom-language.json"]
      }
    }
  }
}

In JavaScript and TypeScript code blocks, use twoslash to enable interactive type information. Users can hover over variables, functions, and parameters to see types and errors like in an IDE.

type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Hover to see the inferred types
const message = adoptPet("Mintie", "cat");

```ts twoslash Twoslash example
type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Hover to see the inferred types
const message = adoptPet("Mintie", "cat");
```

Add a title to label your code example. Place the title after the language identifier. Titles can contain multiple words and file paths.

You can set the title two ways:

• Inline: Place the title directly after the language identifier.
• title property: Use title="Your title" for titles that need special characters or explicit quoting.

const hello = "world";

const hello = "world";

```javascript Example title
const hello = "world";
```

```javascript title="utils/hello.js"
const hello = "world";
```

Add an icon to your code block using the icon property. See Icons for all available options.

const hello = "world";

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

Highlight specific lines in your code blocks using highlight with the line numbers or ranges you want to highlight.

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

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

Focus on specific lines in your code blocks using focus with line numbers or ranges.

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

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

Display line numbers on the left side of your code block using lines.

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

Allow users to expand and collapse long code blocks using expandable.

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

Enable text wrapping for long lines using wrap. This prevents horizontal scrolling and makes long lines easier to read.

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

Use the nocopy flag to hide the copy to clipboard button on a code block. This can be useful for content where copying is not meaningful, like ASCII diagrams or terminal output.

Pass nocopy="false" to explicitly show the copy button. For a code block with no language, use ```nocopy on its own to render the block as plain text without a copy button.

Inside a <CodeGroup>, you can define the visibility of the copy button for each tab.

User ──▶ CDN ──▶ Origin
              │
              └──▶ Cache

```text title="No copy example" nocopy
User ──▶ CDN ──▶ Origin
              │
              └──▶ Cache
```

Show a visual diff of added or removed lines in your code blocks. The visual diff highlights added lines in green and removed lines in red.

Add [!code ++] or [!code --] inside a comment at the end of a line to mark it as added or removed. Use your language's comment syntax:

For multiple consecutive lines, add a colon and the number of lines:

• // [!code ++:3]: Mark the current line plus the next two lines as added.
• # [!code --:5]: Mark the current line plus the next four lines as removed.

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

def greet():    print("Hello, World!")    print("Hello, Mintlify!")greet()

```js JavaScript diff linesconst greeting = "Hello, World!";function sayHello() {  console.log("Hello, World!");  console.log(greeting);}sayHello();```

```python Python diff linesdef greet():    print("Hello, World!")    print("Hello, Mintlify!")greet()```

Use the <CodeBlock> component in custom React components to programmatically render code blocks with the same styling and features as markdown code blocks.

• language (string) — The programming language for syntax highlighting.

• filename (string) — The filename to display in the code block header.

• icon (string) — The icon to display in the code block header. See Icons for available options.

• lines (boolean) — Whether to show line numbers.

• wrap (boolean) — Whether to wrap the code block.

• nocopy (boolean) — Whether to hide the copy-to-clipboard button.

• expandable (boolean) — Whether to expand the code block.

• highlight (string) — The lines to highlight. Provide a stringified array of numbers. Example: "[1,3,4,5]".

• focus (string) — The lines to focus on. Provide a stringified array of numbers. Example: "[1,3,4,5]".

export const CustomCodeBlock = ({
  filename,
  icon,
  language,
  highlight,
  children,
}) => {
  return (
    <CodeBlock
      filename={filename}
      icon={icon}
      language={language}
      lines
      highlight={highlight}
    >
      {children}
    </CodeBlock>
  );
};

• Editor overview
• Components overview
• Mintlify CLI command reference