Dar formato al código

Mostrar código en línea y bloques de código

​

Agregar ejemplos de código

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.

​

Código en línea

Para indicar una palabra o frase como código, enciérrala entre acentos invertidos (`).

Para marcar una `palabra` o `frase` como código, enciérrala entre comillas invertidas (`).

​

Bloques de código

Usa bloques de código con cercas 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 un title o icon, después del lenguaje.

HelloWorld.java example

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

​

Opciones de bloque de código

Puedes agregar opciones meta a tus bloques de código para personalizar su apariencia.

Debes especificar un lenguaje de programación para un bloque de código antes de agregar cualquier otra opción meta.

​

Sintaxis de opciones

• Opciones de tipo cadena y booleanas: Envuélvelas con "", '' o sin comillas.
• Opciones de expresión: Envuélvelas con {}, "" o ''.

​

Resaltado de sintaxis

Activa el resaltado de sintaxis indicando 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 globalmente los temas de los bloques de código usando styling.codeblocks en tu archivo docs.json. Elige temas sencillos 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 el tema en docs.json como "css-variables" y sobrescribe los colores del resaltado de sintaxis usando variables 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 cadena
• --mint-token-comment: Comentarios
• --mint-token-keyword: Palabras clave
• --mint-token-parameter: Parámetros de función
• --mint-token-function: Nombres de funciones
• --mint-token-string-expression: Expresiones de cadena
• --mint-token-punctuation: Signos de puntuación
• --mint-token-link: Enlaces

Colores ANSI

• --mint-ansi-black, --mint-ansi-black-dim
• --mint-ansi-red, --mint-ansi-red-dim
• --mint-ansi-green, --mint-ansi-green-dim
• --mint-ansi-yellow, --mint-ansi-yellow-dim
• --mint-ansi-blue, --mint-ansi-blue-dim
• --mint-ansi-magenta, --mint-ansi-magenta-dim
• --mint-ansi-cyan, --mint-ansi-cyan-dim
• --mint-ansi-white, --mint-ansi-white-dim
• --mint-ansi-bright-black, --mint-ansi-bright-black-dim
• --mint-ansi-bright-red, --mint-ansi-bright-red-dim
• --mint-ansi-bright-green, --mint-ansi-bright-green-dim
• --mint-ansi-bright-yellow, --mint-ansi-bright-yellow-dim
• --mint-ansi-bright-blue, --mint-ansi-bright-blue-dim
• --mint-ansi-bright-magenta, --mint-ansi-bright-magenta-dim
• --mint-ansi-bright-cyan, --mint-ansi-bright-cyan-dim
• --mint-ansi-bright-white, --mint-ansi-bright-white-dim

Ejemplo de resaltado de sintaxis

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

​

Twoslash

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 tipos y errores como en un IDE.

Twoslash example

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");

​

Icono

Añade un icono a tu bloque de código usando la propiedad icon. Consulta Iconos para ver todas las opciones disponibles.

Icon example

const hello = "world";

​

Resaltado de líneas

Resalta líneas específicas en tus bloques de código usando highlight con los números de línea o los rangos que quieras resaltar.

Ejemplo de resaltado de líneas

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

​

Enfoque de líneas

Resalta líneas específicas en tus bloques de código usando focus con números o rangos de líneas.

Line example

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

​

Mostrar números de línea

Muestra los números de línea en el lado izquierdo de tu bloque de código usando lines.

Ejemplo de números de línea

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

​

Expandible

Permite que los usuarios expandan y contraigan bloques de código largos usando expandable.

Expandable example

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

​

Diff

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 se resaltan 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 (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 de comentarios debe coincidir con tu lenguaje de programación (por ejemplo, // para JavaScript o # para Python).

Diff example

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