Puedes añadir fragmentos de código en línea o bloques de código. Los bloques de código admiten opciones meta para el resaltado de sintaxis, títulos, resaltado de líneas, iconos y más.
Utiliza bloques de código delimitados encerrando el código entre tres comillas invertidas (`). Los bloques de código se pueden copiar y, si tienes assistant habilitado, los usuarios pueden pedirle a la IA que explique el código.Especifica el lenguaje de programación para el resaltado de sintaxis y para habilitar las opciones meta. Agrega cualquier opción meta, como un title o icon, después del lenguaje.
Reportar código incorrecto
Copiar
Preguntar a la IA
class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); }}
Habilita el resaltado de sintaxis especificando el lenguaje de programación después de 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 los temas de bloques de código de forma global usando styling.codeblocks en tu archivo docs.json. Establece temas simples como system o dark, o configura temas de Shiki personalizados para los modos claro y oscuro. Consulta Configuración para ver las opciones de configuración.
Reportar código incorrecto
Copiar
Preguntar a la IA
class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!"); }}
Tema de resaltado de sintaxis personalizado
Para temas personalizados, configura el tema en docs.json como "css-variables" y redefine los colores de resaltado de sintaxis usando variables de CSS con el prefijo --mint-.Están disponibles las siguientes variables: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 tipo string
--mint-token-comment: Comentarios
--mint-token-keyword: Palabras clave
--mint-token-parameter: Parámetros de funciones
--mint-token-function: Nombres de funciones
--mint-token-string-expression: Expresiones de tipo string
Resaltado de sintaxis personalizadoAgrega resaltado de sintaxis para lenguajes que no estén incluidos en el conjunto predeterminado de Shiki proporcionando archivos de gramática TextMate personalizados. Crea un archivo JSON siguiendo el formato de gramática de TextMate y luego haz referencia a él en tu docs.json. Puedes agregar varios lenguajes personalizados incluyendo rutas adicionales en el array.
En bloques de código de JavaScript y TypeScript, usa twoslash para habilitar información interactiva sobre tipos. Los usuarios pueden colocar el cursor sobre variables, funciones y parámetros para ver tipos y errores como en un IDE.
Reportar código incorrecto
Copiar
Preguntar a la IA
typePet = "cat" | "dog" | "hamster";functionadoptPet(name: string, type:Pet) { return `${name} the ${type} is now adopted!`;}// Coloca el cursor para ver los tipos inferidosconstmessage =adoptPet("Mintie", "cat");
Permite que los usuarios expandan y contraigan bloques de código largos con expandable.
Reportar código incorrecto
Copiar
Preguntar a la IA
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 # Quitar de los préstamos del usuario 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() # Agregar 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 un diff 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 diffs, 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 (resaltada en verde).
// [!code --]: Marca una línea como eliminada (resaltada en rojo).
Para varias líneas consecutivas, especifica el número de líneas después de los 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 React personalizados para renderizar de manera programática bloques de código con el mismo estilo y las mismas características que los bloques de código de Markdown.
