Dar formato al código

Añadir ejemplos de código

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.

Código en línea

Para indicar que una palabra o frase es código, enciérrala entre comillas invertidas (`).

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

Bloques de código

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.

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

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

Opciones de bloques de código

Añade opciones de metadatos 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 añadir cualquier otra opción de metadatos.

Sintaxis de opciones

Opciones de tipo cadena (string) y booleanas: Escríbelas entre "", '' o sin comillas.
Opciones de expresión: Escríbelas entre {}, "" o ''.

Resaltado de sintaxis

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.

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

```java Syntax highlighting example
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
--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

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.

docs.json

{
  "styling": {
    "codeblocks": {
      "languages": {
        "custom": ["/languages/my-custom-language.json"]
      }
    }
  }
}

Twoslash

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.

type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Coloca el cursor para ver los tipos inferidos
const message = adoptPet("Mintie", "cat");

```ts twoslash Ejemplo de Twoslash
type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
  return `${name} the ${type} is now adopted!`;
}

// Coloca el cursor para ver los tipos inferidos
const message = adoptPet("Mintie", "cat");
```

Título

Añade un título para identificar tu ejemplo de código. Usa title="Your title" o una cadena en una sola línea.

const hello = "world";

```javascript Title example
const hello = "world";
```

Icono

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

const hello = "world";

```javascript Icon example icon="square-js"
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 rangos que deseas resaltar.

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

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.

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

```javascript Ejemplo de enfoque de líneas focus={2,4-5}
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.

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

Expandible

Permite que los usuarios expandan y contraigan bloques de código largos con 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

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

```python Expandable example expandable
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

# ...

if __name__ == "__main__":
    main()
```

Ajuste de línea

Activa el ajuste de texto para líneas largas con wrap. Esto evita el desplazamiento horizontal y hace que las líneas largas sean más fáciles de leer.

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

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, 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).

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

```js Diff example lines
const greeting = "Hello, World!"; // [!code ++]
function sayHello() {
  console.log("Hello, World!"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```

Componente CodeBlock

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.

Props

string

El lenguaje de programación para el resaltado de sintaxis.

string

El nombre de archivo que se mostrará en el encabezado del bloque de código.

string

El icon que se mostrará en el encabezado del bloque de código. Consulta Icons para ver las opciones disponibles.

boolean

Indica si se deben mostrar los números de línea.

boolean

Indica si se debe ajustar el bloque de código.

boolean

Indica si el bloque de código se puede expandir.

string

Las líneas que se deben resaltar. Proporciona un array de números como cadena. Ejemplo: "[1,3,4,5]".

string

Las líneas en las que se debe centrar la atención. Proporciona un array de números como cadena. Ejemplo: "[1,3,4,5]".

Ejemplo

export const CustomCodeBlock = ({
  filename,
  icon,
  language,
  highlight,
  children,
}) => {
  return (
    <CodeBlock
      filename={filename}
      icon={icon}
      language={language}
      lines
      highlight={highlight}
    >
      {children}
    </CodeBlock>
  );
};

Comenzar

Organizar

Personalizar

Crear contenido

Documentar APIs

Implementar

Optimizar

Añadir ejemplos de código

Código en línea

Bloques de código

Opciones de bloques de código

Sintaxis de opciones

Resaltado de sintaxis

Twoslash

Título

Icono

Resaltado de líneas

Enfoque de líneas

Mostrar números de línea

Expandible

Ajuste de línea

Diff

Componente CodeBlock

Props

Ejemplo

​Añadir ejemplos de código

​Código en línea

​Bloques de código

​Opciones de bloques de código

​Sintaxis de opciones

​Resaltado de sintaxis

​Twoslash

​Título

​Icono

​Resaltado de líneas

​Enfoque de líneas

​Mostrar números de línea

​Expandible

​Ajuste de línea

​Diff

​Componente CodeBlock

​Props

​Ejemplo

Añadir ejemplos de código

Código en línea

Bloques de código

Opciones de bloques de código

Sintaxis de opciones

Resaltado de sintaxis

Twoslash

Título

Icono

Resaltado de líneas

Enfoque de líneas

Mostrar números de línea

Expandible

Ajuste de línea

Diff

Componente CodeBlock

Props

Ejemplo