Capitulo 7: Markdown Avanzado

< Volver al Indice del Tutorial

Spacecake soporta GitHub-Flavoured Markdown (GFM) con extensiones visuales que aprovechan el modo WYSIWYG. Elementos como checklists, diagramas y tablas no son solo texto renderizado: son componentes interactivos que puedes manipular directamente.

Checklists

Las listas de verificacion se crean con la sintaxis estandar de GFM:

- [ ] Item pendiente
- [x] Item completado
- [ ] Otro item pendiente

Interactividad en Rich Mode

En rich mode, los checklists son interactivos. Puedes hacer click en las casillas para marcar o desmarcar items sin editar el markdown manualmente. Cada click alterna entre [ ] y [x] en el archivo subyacente.

Caso de Uso: Planes de Claude Code

Los checklists son especialmente utiles cuando trabajas con planes de ejecucion de Claude Code. Puedes:

1. Pedirle a Claude que genere un plan con checklists
2. Abrir el plan en Spacecake
3. Ir marcando los items completados con clicks mientras avanzas
4. Tener visibilidad clara del progreso

Este flujo es mucho mas agil que editar manualmente los checkboxes en un archivo de texto.

Diagramas Mermaid

Spacecake renderiza diagramas Mermaid directamente en el editor. Para crear un diagrama, usa un code block con el lenguaje mermaid:

```mermaid
flowchart TD
    A[Inicio] --> B{Decision}
    B -->|Si| C[Accion 1]
    B -->|No| D[Accion 2]
    C --> E[Fin]
    D --> E
```

Tipos de Diagramas Soportados

Mermaid soporta multiples tipos de diagramas:

• Flowcharts: diagramas de flujo con nodos y conexiones
• Sequence diagrams: diagramas de secuencia para interacciones entre componentes
• Class diagrams: diagramas de clases UML
• State diagrams: diagramas de estados y transiciones
• Entity Relationship: diagramas ER para bases de datos
• Gantt charts: diagramas de Gantt para planificacion

Renderizado en Rich Mode

En rich mode, los diagramas Mermaid se renderizan visualmente como graficos SVG. No ves el codigo mermaid, sino el diagrama resultante. Para editar el diagrama, puedes cambiar a source mode o hacer click en el bloque para ver el codigo fuente.

Frontmatter

Los bloques frontmatter son secciones YAML al inicio de un archivo markdown, delimitados por ---:

---
title: "Mi Documento"
description: "Una descripcion"
date: 2026-03-03
tags: ["ejemplo", "demo"]
---

Renderizado Especial

Spacecake tiene un nodo especial para frontmatter. En lugar de mostrarlo como texto plano o como un code block generico, lo renderiza como un bloque diferenciado visualmente. Esto permite identificar rapidamente los metadatos del archivo sin confundirlos con el contenido.

Tablas

Las tablas markdown usan la sintaxis estandar con separadores |:

| Columna 1 | Columna 2 | Columna 3 |
|-----------|-----------|-----------|
| Dato A    | Dato B    | Dato C    |
| Dato D    | Dato E    | Dato F    |

Interactividad en Rich Mode

En rich mode, las tablas se renderizan como tablas HTML con:

• Bordes visibles: delimitacion clara de filas y columnas
• Celdas redimensionables: puedes arrastrar los bordes de las columnas para ajustar el ancho
• Edicion directa: haz click en cualquier celda para editar su contenido
• Navegacion con Tab: muevete entre celdas con la tecla Tab

Imagenes

Spacecake soporta imagenes tanto inline como block en markdown:

![Descripcion de la imagen](ruta/a/la/imagen.png)

Funcionalidades en Rich Mode

En rich mode, las imagenes tienen funcionalidades adicionales:

• Visualizacion directa: las imagenes se muestran renderizadas, no como texto de enlace
• Redimensionar arrastrando: puedes ajustar el tamano de la imagen arrastrando las esquinas o bordes
• Texto alternativo: el texto entre corchetes se usa como atributo alt para accesibilidad

Slash Commands del Editor

Spacecake incluye un menu de comandos rapidos accesible escribiendo / al inicio de una linea vacia en el editor.

Comandos Disponibles

• /h1: insertar un heading de nivel 1
• /h2: insertar un heading de nivel 2
• /h3: insertar un heading de nivel 3
• /code: insertar un code block vacio
• /paragraph: insertar un parrafo normal
• /frontmatter: insertar un bloque frontmatter con la estructura YAML basica

Como Usar los Slash Commands

1. Posiciona el cursor en una linea vacia
2. Escribe /
3. Aparece un menu desplegable con las opciones disponibles
4. Selecciona el comando deseado con las flechas y Enter, o sigue escribiendo para filtrar

Diferencia con Slash Commands de Claude Code

Es importante no confundir los slash commands del editor de Spacecake con los slash commands de Claude Code (/plan, /ide, /compact, etc.). Son sistemas completamente independientes:

• Slash commands de Spacecake: insertan elementos en el editor markdown (headings, code blocks, etc.)
• Slash commands de Claude Code: son comandos de la CLI que controlan el comportamiento del agente

Los de Spacecake funcionan en el area de edicion de texto. Los de Claude Code funcionan en la terminal.

---

Siguiente: Capitulo 8: Diff Viewer —>