mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Dean from Mintlify
1aaae5f9bf
* Update accordions.mdx * add snippet for icons * use icon snippet for consistency * add required/optional icon snippets * update for required/optional --------- Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
337 lines
8.3 KiB
Plaintext
337 lines
8.3 KiB
Plaintext
---
|
|
title: "Code"
|
|
description: "Display inline code and code blocks"
|
|
icon: "code"
|
|
---
|
|
|
|
## Adding code samples
|
|
|
|
You can add inline code snippets or code blocks. Code blocks support meta options for syntax highlighting, titles, line highlighting, icons, and more.
|
|
|
|
### Inline code
|
|
|
|
To denote a `word` or `phrase` as code, enclose it in backticks (\`).
|
|
|
|
```mdx
|
|
To denote a `word` or `phrase` as code, enclose it in backticks (`).
|
|
```
|
|
|
|
### Code blocks
|
|
|
|
Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Code blocks are copyable, and if you have the assistant enabled, users can ask AI 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.
|
|
|
|
```java HelloWorld.java lines icon="java"
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
|
|
````mdx
|
|
```java HelloWorld.java lines icon="java"
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
````
|
|
|
|
## Code block options
|
|
|
|
You can add meta options to your code blocks to customize their appearance.
|
|
|
|
<Note>
|
|
You must specify a programming language for a code block before adding any other meta options.
|
|
</Note>
|
|
|
|
### Option syntax
|
|
|
|
- **String and boolean options**: Wrap with `""`, `''`, or no quotes.
|
|
- **Expression options**: Wrap with `{}`, `""`, or `''`.
|
|
|
|
### Syntax highlighting
|
|
|
|
Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.
|
|
|
|
We use [Shiki](https://shiki.style/) for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.
|
|
|
|
```java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
|
|
````mdx
|
|
```java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
````
|
|
|
|
### Title
|
|
|
|
Add a title to label your code example. Use `title="Your title"` or a string on a single line.
|
|
|
|
```javascript Code Block Example
|
|
const hello = "world";
|
|
```
|
|
|
|
````mdx
|
|
```javascript Code Block Example
|
|
const hello = "world";
|
|
```
|
|
````
|
|
|
|
### Icon
|
|
|
|
Add an icon to your code block using the `icon` property. See [Icons](/components/icons) for all available options.
|
|
|
|
```javascript icon="square-js"
|
|
const hello = "world";
|
|
```
|
|
|
|
````mdx
|
|
```javascript icon="square-js"
|
|
const hello = "world";
|
|
```
|
|
````
|
|
|
|
### Line Highlighting
|
|
|
|
Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight.
|
|
|
|
```javascript Line Highlighting Example highlight= {1-2,5}
|
|
const greeting = "Hello, World!";
|
|
function sayHello() {
|
|
console.log(greeting);
|
|
}
|
|
sayHello();
|
|
```
|
|
|
|
````mdx
|
|
```javascript Line Highlighting Example highlight={1-2,5}
|
|
const greeting = "Hello, World!";
|
|
function sayHello() {
|
|
console.log(greeting);
|
|
}
|
|
sayHello();
|
|
```
|
|
````
|
|
|
|
### Line focusing
|
|
|
|
Focus on specific lines in your code blocks using `focus` with line numbers or ranges.
|
|
|
|
```javascript Line Focus Example focus= {2,4-5}
|
|
const greeting = "Hello, World!";
|
|
function sayHello() {
|
|
console.log(greeting);
|
|
}
|
|
sayHello();
|
|
```
|
|
|
|
````mdx
|
|
```javascript Line Focus Example focus={2,4-5}
|
|
const greeting = "Hello, World!";
|
|
function sayHello() {
|
|
console.log(greeting);
|
|
}
|
|
sayHello();
|
|
```
|
|
````
|
|
|
|
### Show line numbers
|
|
|
|
Display line numbers on the left side of your code block using `lines`.
|
|
|
|
```javascript Show Line Numbers Example lines
|
|
const greeting = "Hello, World!";
|
|
function sayHello() {
|
|
console.log(greeting);
|
|
}
|
|
sayHello();
|
|
```
|
|
|
|
````mdx
|
|
```javascript Show Line Numbers Example lines
|
|
const greeting = "Hello, World!";
|
|
function sayHello() {
|
|
console.log(greeting);
|
|
}
|
|
sayHello();
|
|
```
|
|
````
|
|
|
|
### Expandable
|
|
|
|
Allow users to expand and collapse long code blocks using `expandable`.
|
|
|
|
```python Expandable Example 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()
|
|
```
|
|
|
|
````mdx
|
|
```python Expandable Example expandable
|
|
from datetime import datetime, timedelta
|
|
from typing import Dict, List, Optional
|
|
from dataclasses import dataclass
|
|
|
|
# ...
|
|
|
|
if __name__ == "__main__":
|
|
main()
|
|
```
|
|
````
|
|
|
|
### Wrap
|
|
|
|
Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.
|
|
|
|
```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();
|
|
```
|
|
|
|
````mdx
|
|
```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
|
|
|
|
Show a visual diff of added or removed lines in your code blocks. Added lines are highlighted in green and removed lines are highlighted in red.
|
|
|
|
To create diffs, add these special comments at the end of lines in your code block:
|
|
|
|
- `// [!code ++]`: Mark a line as added (green highlight).
|
|
- `// [!code --]`: Mark a line as removed (red highlight).
|
|
|
|
For multiple consecutive lines, specify the number of lines after a colon:
|
|
|
|
- `// [!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.
|
|
|
|
The comment syntax must match your programming language (for example, `//` for JavaScript or `#` for Python).
|
|
|
|
```js Diff Example icon="code" lines
|
|
const greeting = "Hello, World!"; // [!code ++]
|
|
function sayHello() {
|
|
console.log("Hello, World!"); // [!code --]
|
|
console.log(greeting); // [!code ++]
|
|
}
|
|
sayHello();
|
|
```
|
|
|
|
````text
|
|
```js Diff Example icon="code" lines
|
|
const greeting = "Hello, World!"; // [!code ++]
|
|
function sayHello() {
|
|
console.log("Hello, World!"); // [!code --]
|
|
console.log(greeting); // [!code ++]
|
|
}
|
|
sayHello();
|
|
```
|
|
```` |