> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Código

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

<div id="adding-code-samples">
  ## Agregar ejemplos de código
</div>

Puedes agregar 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, íconos y más.

<div id="inline-code">
  ### Código en línea
</div>

Para indicar una `palabra` o `frase` como código, colócala entre acentos graves (\`).

```mdx theme={null}
Para indicar una `palabra` o `frase` como código, enciérrala entre acentos graves (`).
```

<div id="code-blocks">
  ### Bloques de código
</div>

Usa [bloques de código con cercas](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) encerrando el código entre tres acentos invertidos. Los bloques de código se pueden copiar y, si tienes el Asistente 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 título o un ícono, después del lenguaje.

```java HelloWorld.java lines icon="java" theme={null}
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("¡Hola, mundo!");
    }
}
```

````mdx theme={null}
```java HelloWorld.java lines icon="java"
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("¡Hola, mundo!");
    }
}
```
````

<div id="code-block-options">
  ## Opciones de bloques de código
</div>

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

<Note>
  Debes especificar un lenguaje de programación para un bloque de código antes de añadir cualquier otra opción meta.
</Note>

<div id="option-syntax">
  ### Sintaxis de opciones
</div>

* **Opciones de tipo string y booleanas**: Envuelve con `""`, `''` o sin comillas.
* **Opciones de expresión**: Envuelve con `{}`, `""` o `''`.

<div id="syntax-highlighting">
  ### Resaltado de sintaxis
</div>

Activa 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](https://shiki.style/) para el resaltado de sintaxis y admitimos todos los lenguajes disponibles. Consulta la lista completa de [lenguajes](https://shiki.style/languages) en la documentación de Shiki.

```java theme={null}
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("¡Hola, mundo!");
    }
}
```

````mdx theme={null}
```java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("¡Hola, mundo!");
    }
}
```
````

<div id="title">
  ### Título
</div>

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

```javascript Ejemplo de bloque de código theme={null}
const hello = "mundo";
```

````mdx theme={null}
```javascript Ejemplo de bloque de código
const hello = "world";
```
````

<div id="icon">
  ### Icono
</div>

Agrega un icono a tu bloque de código usando la propiedad `icon`. Consulta [Iconos](/es/components/icons) para ver todas las opciones disponibles.

```javascript icon="square-js" theme={null}
const hello = "world";
```

````mdx theme={null}
```javascript icon="square-js"
const hello = "world";
```
````

<div id="line-highlighting">
  ### Resaltado de líneas
</div>

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

```javascript Ejemplo de resalte de líneas highlight= {1-2,5} theme={null}
const greeting = "¡Hola, mundo!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx theme={null}
```javascript Ejemplo de resaltado de líneas highlight={1-2,5}
const saludo = "¡Hola, mundo!";
function decirHola() {
  console.log(saludo);
}
decirHola();
```
````

<div id="line-focusing">
  ### Enfoque de líneas
</div>

Resalta líneas específicas en tus bloques de código usando `focus` con números de línea o rangos.
\---MDX\_CONTENTEND---

```javascript Ejemplo de enfoque de línea focus= {2,4-5} theme={null}
const greeting = "¡Hola, mundo!";
function decirHola() {
  console.log(greeting);
}
decirHola();
```

````mdx theme={null}
```javascript Ejemplo de enfoque de líneas focus={2,4-5}
const greeting = "¡Hola, mundo!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="show-line-numbers">
  ### Mostrar números de línea
</div>

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

```javascript Mostrar números de línea Ejemplo de líneas theme={null}
const greeting = "¡Hola, mundo!";
function decirHola() {
  console.log(greeting);
}
decirHola();
```

````mdx theme={null}
```javascript Mostrar números de línea Ejemplo líneas
const greeting = "¡Hola, mundo!";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="expandable">
  ### Expandible
</div>

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

```python Ejemplo expandible expandable theme={null}
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"Ya existe un libro con el ISBN {book.isbn}")
        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("No se encontró el libro")

        if book.checked_out:
            raise ValueError("El libro ya está prestado")

        if len(self.checkouts[patron]) >= 3:
            raise ValueError("El usuario alcanzó el límite de préstamos")

        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("No se encontró el libro o no está prestado")

        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"Multa por retraso: ${late_fee:.2f}")

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

````mdx theme={null}
```python Ejemplo desplegable expandable
from datetime import datetime, timedelta
from typing import Dict, List, Optional
from dataclasses import dataclass

# ...

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

<div id="wrap">
  ### Ajuste
</div>

Habilita el ajuste de texto para líneas largas con `wrap`. Esto evita el desplazamiento horizontal y facilita la lectura de líneas extensas.

```javascript Ejemplo de ajuste wrap theme={null}
const greeting = "¡Hola, mundo! Soy una línea de texto larga que se ajustará a la siguiente línea.";
function sayHello() {
  console.log(greeting);
}
sayHello();
```

````mdx theme={null}
```javascript Ejemplo de ajuste wrap
const greeting = "¡Hola, mundo! Soy una línea de texto larga que se ajustará a la siguiente línea.";
function sayHello() {
  console.log(greeting);
}
sayHello();
```
````

<div id="diff">
  ### Diff
</div>

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

```js Ejemplo de diff icon="code" lines theme={null}
const greeting = "¡Hola, mundo!"; // [!code ++]
function sayHello() {
  console.log("¡Hola, mundo!"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```

````text theme={null}
```js Diff Example icon="code" lines
const greeting = "¡Hola, mundo!"; // [!code ++]
function sayHello() {
  console.log("¡Hola, mundo!"); // [!code --]
  console.log(greeting); // [!code ++]
}
sayHello();
```
````