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 (`).
To denote a ` word ` or ` phrase ` as code, enclose it in backticks (`).
Code blocks
Use 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.
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!" );
}
}
```
Code block options
You can add meta options to your code blocks to customize their appearance.
You must specify a programming language for a code block before adding any other meta options.
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 for syntax highlighting and support all available languages. See the full list of languages in Shiki’s documentation.
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!" );
}
}
```
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" ;
```
Icon
Add an icon to your code block. You can use FontAwesome icons, Lucide icons, or absolute URLs.
``` 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.
Line Highlighting Example
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 ();
```
Line focusing
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 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
.
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 ();
```
Expandable
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()
See all 87 lines
``` 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.
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 ();
```