格式化代码

在文档中格式化代码，支持语法高亮、行号、差异对比、复制按钮和 MDX 中的交互式代码组功能。

添加代码示例

你可以添加行内代码片段或代码块。代码块支持用于语法高亮、标题、行高亮、icon 等的元选项，以及更多功能。

行内代码

要将某个 word 或 phrase 标记为代码，请用反引号 (`) 将其包裹。

要将`单词`或`短语`标记为代码,请用反引号(`)将其包围。

代码块

使用围栏代码块，将代码置于三个反引号内。代码块可复制；如果启用了 AI 助手，用户可以让助手解释代码。

为语法高亮和启用元选项指定编程语言。在语言标识后添加任意元选项，如 title 或 icon。

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

代码块选项

在代码块中添加元选项来自定义其展示效果。

在添加任何其他元选项之前，必须先为代码块指定编程语言。

选项语法

字符串和布尔选项：可以使用 ""、''，或不加引号包裹。
表达式选项：可以使用 {}、""，或 '' 包裹。

语法高亮

在代码块的起始反引号后指定编程语言即可启用语法高亮。

Mintlify 使用 Shiki 实现语法高亮，支持所有可用语言。完整语言列表请参见 Shiki 文档中的语言。

在 docs.json 中通过 styling.codeblocks 全局自定义代码块主题。可设置 system 或 dark 等简单主题，或为明暗模式配置自定义的 Shiki 主题。配置项参见 Settings。

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

Twoslash

在 JavaScript 和 TypeScript 代码块中，使用 twoslash 可启用交互式类型信息。用户可以像在 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");

标题

为你的代码示例添加一个标题。将标题放在语言标识符之后。标题可以包含多个单词和文件路径。

你可以通过两种方式设置标题：

内联：将标题直接放在语言标识符之后。
title 属性：使用 title="Your title" 来设置需要特殊字符或显式引号的标题。

const hello = "world";

图标

使用 icon 属性为代码块添加图标。参见图标以查看所有可用选项。

const hello = "world";

行高亮

在代码块中，使用 highlight 并指定要高亮的行号或行范围来高亮特定行。

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

行聚焦

在代码块中使用 focus 搭配行号或行范围来突出显示特定行。

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

显示行号

使用 lines 在代码块左侧显示行号。

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

可展开

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

换行

使用 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();

差异

在代码块中直观显示新增或删除的行。新增行会以绿色高亮显示，删除行会以红色高亮显示。

在行尾的注释中添加 [!code ++] 或 [!code --]，即可将该行标记为新增或删除。请使用对应语言的注释语法：

Language	Added	Removed
JavaScript, TypeScript, Java, C, C++, Go, Rust	`// [!code ++]`	`// [!code --]`
Python, Ruby, Bash, YAML	`# [!code ++]`	`# [!code --]`
HTML, XML	`<!-- [!code ++] -->`	`<!-- [!code --] -->`
CSS	`/* [!code ++] */`	`/* [!code --] */`
SQL, Lua	`-- [!code ++]`	`-- [!code --]`

对于连续的多行，请添加冒号和行数：

// [!code ++:3]：将当前行及其后两行标记为新增。
# [!code --:5]：将当前行及其后四行标记为删除。

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

CodeBlock 组件

在自定义 React 组件中使用 <CodeBlock>，以编程方式渲染与 Markdown 代码块相同样式和功能的代码块。

属性

languagestring

用于语法高亮的编程语言。

filenamestring

显示在代码块标题中的文件名。

iconstring

显示在代码块标题中的 icon。可用选项参见图标。

linesboolean

是否显示行号。

wrapboolean

是否对代码块进行换行显示。

expandableboolean

是否可展开代码块。

highlightstring

需要高亮的行。提供数字的字符串化数组。示例："[1,3,4,5]"。

focusstring

需要聚焦的行。提供数字的字符串化数组。示例："[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>
  );
};

On this page