Capitulo 6: Code Blocks y Syntax Highlighting

< Volver al Indice del Tutorial

Los code blocks son una parte central del flujo de trabajo con Claude Code. Spacecake les da un tratamiento especial: no son simples bloques de texto monoespaciado, sino editores completos con syntax highlighting, autocompletado y todas las funcionalidades de CodeMirror.

Code Blocks con Lenguaje

Para crear un code block con syntax highlighting, usa triple backticks seguido del nombre del lenguaje:

```javascript
function saludar(nombre) {
  return `Hola, ${nombre}!`;
}
```

El nombre del lenguaje despues de los backticks activa el coloreado de sintaxis correspondiente. Sin el nombre del lenguaje, el bloque se muestra como texto plano monoespaciado.

Lenguajes Soportados

Spacecake soporta syntax highlighting para una amplia variedad de lenguajes a traves de CodeMirror:

• Web: JavaScript, TypeScript, HTML, CSS, JSX, TSX
• Backend: Python, Rust, Go, Java, C, C++, C#
• Data: JSON, YAML, TOML, XML
• DevOps: Bash, Shell, Dockerfile
• Databases: SQL
• Markup: Markdown, LaTeX

Y muchos mas. Si un lenguaje tiene soporte en CodeMirror, Spacecake lo puede colorear.

Syntax Highlighting

El coloreado de sintaxis es automatico una vez que especificas el lenguaje. Cada tipo de token recibe un color diferente:

• Palabras clave del lenguaje (function, const, if, return)
• Strings y literales de texto
• Numeros y constantes
• Comentarios
• Nombres de funciones y metodos
• Tipos y clases
• Operadores

Los colores se adaptan al tema activo de Spacecake.

Header del Code Block

Cada code block en rich mode muestra un header en la parte superior con:

• Nombre del lenguaje o archivo: indica que tipo de codigo contiene el bloque
• Boton de copiar: un click copia todo el contenido del code block al portapapeles

Este header facilita la identificacion rapida del contenido, especialmente cuando tienes multiples code blocks en un mismo documento.

Copiar Codigo

El boton de copiar en el header del code block copia el contenido completo al portapapeles con un solo click. Esto es particularmente util cuando:

• Claude Code genera un snippet que necesitas pegar en otro lugar
• Quieres compartir un fragmento de codigo con alguien
• Necesitas mover codigo entre archivos

No necesitas seleccionar manualmente el texto del code block.

Atajos de Teclado en Code Blocks

Dentro de un code block, Spacecake hereda los atajos de CodeMirror. Estos son los mas utiles:

Seleccion

• Ctrl+D: seleccionar la siguiente ocurrencia de la palabra seleccionada. Cada vez que presionas Ctrl+D, se agrega una nueva seleccion, permitiendo edicion multi-cursor

Edicion Automatica

• Bracket closing automatico: al escribir (, [, {, " o ', el caracter de cierre se inserta automaticamente
• Indentacion automatica: al presionar Enter dentro de un bloque (despues de {), la nueva linea se indenta correctamente

Code Folding

• Colapsar bloques: puedes colapsar funciones, clases, objetos y otros bloques de codigo para reducir el ruido visual
• Los indicadores de folding aparecen en el margen izquierdo del code block

Autocompletado

• CodeMirror ofrece sugerencias de autocompletado basadas en el contenido del archivo
• Las sugerencias aparecen mientras escribes y se pueden aceptar con Tab o Enter

Linting

• Indicadores visuales de errores de sintaxis dentro del code block
• Subraya problemas potenciales en el codigo

Code Blocks en Rich Mode

En rich mode, los code blocks no son solo texto formateado. Son editores CodeMirror completos embebidos dentro del documento Lexical. Esto significa que:

• Tienes syntax highlighting en tiempo real
• Los atajos de CodeMirror funcionan dentro del bloque
• Puedes navegar con las flechas del teclado dentro y fuera del bloque
• Al hacer click dentro del bloque, entras en modo de edicion de codigo
• Al hacer click fuera, vuelves al flujo normal del documento

Esta integracion entre Lexical y CodeMirror es lo que hace que el editor de Spacecake sea especialmente potente para documentacion tecnica que mezcla texto narrativo con fragmentos de codigo.

---

Siguiente: Capitulo 7: Markdown Avanzado —>