← Volver al listado de tecnologías ← Índice de Spacecake

Capitulo 7: Markdown Avanzado

Por: Artiko
spacecakemarkdownmermaidchecklists

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:

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:

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:

Slash Commands del Editor

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

Comandos Disponibles

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:

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

Siguiente: Capitulo 8: Diff Viewer —>

← Volver al listado de tecnologías ← Índice de Spacecake