> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Dar formato al código

> Mostrar y aplicar estilo al código en línea y a los bloques de código.

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

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.

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

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

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

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

Utiliza [bloques de código delimitados](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) 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.

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

  ````mdx Formato theme={null}
  ```java HelloWorld.java example lines icon="java"
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```
  ````
</CodeGroup>

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

Añade opciones de metadatos 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 de metadatos.
</Note>

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

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

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

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](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.

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](https://shiki.style/themes) personalizados para los modos claro y oscuro. Consulta [Configuración](/es/organize/settings#param-styling) para ver las opciones de configuración.

<CodeGroup>
  ```java Syntax highlighting example theme={null}
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```

  ````mdx Format theme={null}
  ```java Syntax highlighting example
  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }
  ```
  ````
</CodeGroup>

<Accordion title="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 personalizado**

  Agrega 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](https://macromates.com/manual/en/language_grammars) y luego haz referencia a él en tu `docs.json`. Puedes agregar varios lenguajes personalizados incluyendo rutas adicionales en el array.

  ```json docs.json theme={null}
  {
    "styling": {
      "codeblocks": {
        "languages": {
          "custom": ["/languages/my-custom-language.json"]
        }
      }
    }
  }
  ```
</Accordion>

<div id="twoslash">
  ### Twoslash
</div>

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.

<CodeGroup>
  ```ts twoslash Ejemplo de Twoslash theme={null}
  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");
  ```

  ````mdx Format theme={null}
  ```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");
  ```
  ````
</CodeGroup>

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

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

<CodeGroup>
  ```javascript Title example theme={null}
  const hello = "world";
  ```

  ````mdx Format theme={null}
  ```javascript Title example
  const hello = "world";
  ```
  ````
</CodeGroup>

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

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

<CodeGroup>
  ```javascript Icon example icon=square-js theme={null}
  const hello = "world";
  ```

  ````mdx Formato theme={null}
  ```javascript Icon example icon="square-js"
  const hello = "world";
  ```
  ````
</CodeGroup>

<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 de línea o rangos que deseas resaltar.

<CodeGroup>
  ```javascript Line highlighting example {1,2,5} theme={null}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format theme={null}
  ```javascript Line highlighting example highlight={1-2,5}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<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 o rangos de líneas.

<CodeGroup>
  ```javascript Ejemplo de enfoque de líneas focus=2,4,5 theme={null}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Formato theme={null}
  ```javascript Ejemplo de enfoque de líneas focus={2,4-5}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

<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`.

<CodeGroup>
  ```javascript Show line numbers example lines theme={null}
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Formato theme={null}
  ```javascript Show line numbers example lines
  const greeting = "Hello, World!";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```
  ````
</CodeGroup>

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

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

<CodeGroup>
  ```python Expandable example 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"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()
  ```

  ````text Formato theme={null}
  ```python Expandable example expandable
  from datetime import datetime, timedelta
  from typing import Dict, List, Optional
  from dataclasses import dataclass

  # ...

  if __name__ == "__main__":
      main()
  ```
  ````
</CodeGroup>

<div id="wrap">
  ### Ajuste de línea
</div>

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.

<CodeGroup>
  ```javascript Wrap example wrap theme={null}
  const greeting =
    "Hello, World! I am a long line of text that will wrap to the next line.";
  function sayHello() {
    console.log(greeting);
  }
  sayHello();
  ```

  ````mdx Format theme={null}
  ```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();
  ```
  ````
</CodeGroup>

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

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

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

<div id="codeblock-component">
  ## Componente CodeBlock
</div>

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.

<div id="props">
  ### Props
</div>

<ResponseField name="language" type="string">
  El lenguaje de programación para el resaltado de sintaxis.
</ResponseField>

<ResponseField name="filename" type="string">
  El nombre de archivo que se mostrará en el encabezado del bloque de código.
</ResponseField>

<ResponseField name="icon" type="string">
  El icon que se mostrará en el encabezado del bloque de código. Consulta [Icons](/es/components/icons)
  para ver las opciones disponibles.
</ResponseField>

<ResponseField name="lines" type="boolean">
  Indica si se deben mostrar los números de línea.
</ResponseField>

<ResponseField name="wrap" type="boolean">
  Indica si se debe ajustar el bloque de código.
</ResponseField>

<ResponseField name="expandable" type="boolean">
  Indica si el bloque de código se puede expandir.
</ResponseField>

<ResponseField name="highlight" type="string">
  Las líneas que se deben resaltar. Proporciona un array de números como cadena. Ejemplo:
  `"[1,3,4,5]"`.
</ResponseField>

<ResponseField name="focus" type="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]"`.
</ResponseField>

<div id="example">
  ### Ejemplo
</div>

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