Puedes agregar fragmentos de código en línea o bloques de código. Los bloques de código admiten opciones de metadatos para el resaltado de sintaxis, títulos, resaltado de líneas, iconos y más.
Usa bloques de código delimitados encerrando el código entre tres comillas invertidas. Los bloques de código se pueden copiar y, si tienes el assistant habilitado, los usuarios pueden pedir a la IA que explique el código.Especifica el lenguaje de programación para el resaltado de sintaxis y para habilitar opciones meta. Agrega cualquier opción meta, como title o icon, después del lenguaje.
Report incorrect code
Copy
Ask AI
class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); }}
Activa el resaltado de sintaxis especificando el lenguaje de programación tras las comillas invertidas de apertura de un bloque de código.Usamos Shiki para el resaltado de sintaxis y admitimos todos los lenguajes disponibles. Consulta la lista completa de lenguajes en la documentación de Shiki.Personaliza globalmente los temas de los bloques de código usando styling.codeblocks en tu archivo docs.json. Define temas simples como system o dark, o configura temas de Shiki personalizados para los modos claro y oscuro. Consulta Settings para ver las opciones de configuración.
Tema personalizado de resaltado de sintaxis
Para temas personalizados, establece tu tema en docs.json como "css-variables" y reemplaza los colores del resaltado de sintaxis usando variables CSS con el prefijo --mint-.Estas variables están disponibles:Colores básicos
--mint-color-text: Color de texto predeterminado
--mint-color-background: Color de fondo
Colores de tokens
--mint-token-constant: Constantes y literales
--mint-token-string: Valores de cadena
--mint-token-comment: Comentarios
--mint-token-keyword: Palabras clave
--mint-token-parameter: Parámetros de función
--mint-token-function: Nombres de función
--mint-token-string-expression: Expresiones de cadena
En los bloques de código de JavaScript y TypeScript, usa twoslash para habilitar información de tipos interactiva. Los usuarios pueden pasar el cursor sobre variables, funciones y parámetros para ver los tipos y errores como en un IDE.
Report incorrect code
Copy
Ask AI
typePet = "cat" | "dog" | "hamster";functionadoptPet(name: string, type:Pet) {return `${name} the ${type} is now adopted!`;}// Hover to see the inferred typesconstmessage =adoptPet("Mintie", "cat");
Permite a los usuarios expandir y contraer bloques de código largos usando expandable.
Report incorrect code
Copy
Ask AI
from datetime import datetime, timedeltafrom typing import Dict, List, Optionalfrom dataclasses import dataclass@dataclassclass Book:title: strauthor: strisbn: strchecked_out: bool = Falsedue_date: Optional[datetime] = Noneclass 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() # Añade algunos libros 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) # Ejemplo de préstamo y devolución 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()
Muestra una diferencia visual de las líneas añadidas o eliminadas en tus bloques de código. Las líneas añadidas se resaltan en verde y las eliminadas en rojo.Para crear diferencias, añade estos comentarios especiales al final de las líneas en tu bloque de código:
// [!code ++]: Marca una línea como añadida (resaltado en verde).
// [!code --]: Marca una línea como eliminada (resaltado en rojo).
Para varias líneas consecutivas, especifica el número de líneas después de dos puntos:
// [!code ++:3]: Marca la línea actual más las dos siguientes como añadidas.
// [!code --:5]: Marca la línea actual más las cuatro siguientes como eliminadas.
La sintaxis del comentario debe coincidir con tu lenguaje de programación (por ejemplo, // para JavaScript o # para Python).
Usa el componente <CodeBlock> en componentes personalizados de React para renderizar de forma programática bloques de código con el mismo estilo y las mismas funcionalidades que los bloques de código de Markdown.
