Preview de procedimientos¶
La vista previa te permite ver cómo se renderizará el procedimiento antes de guardarlo.
Acceder al preview¶
En el editor¶
El panel de preview está siempre visible (lado derecho):
┌──────────────────────────┬──────────────────────────┐
│ EDITOR │ PREVIEW │
│ │ │
│ ## Objetivo │ Objetivo │
│ Desplegar la app... │ ───────── │
│ │ Desplegar la app... │
└──────────────────────────┴──────────────────────────┘
Preview completo¶
Para ver el procedimiento como lo verán los usuarios:
- Haz clic en Preview completo
- Se abre una nueva ventana con el renderizado final
Características del preview¶
Renderizado en tiempo real¶
Cada cambio en el editor se refleja instantáneamente en el preview.
Elementos renderizados¶
| Markdown | Preview |
|---|---|
# Título |
Título grande |
## Subtítulo |
Subtítulo |
**negrita** |
negrita |
*cursiva* |
cursiva |
- [ ] tarea |
☐ tarea |
- [x] hecho |
☑ hecho |
`código` |
código |
Bloques especiales¶
Código¶
Se renderiza con resaltado de sintaxis.
Advertencias¶
Se renderiza como:
Precaución
Mensaje importante
Tablas¶
Se renderiza como tabla formateada.
Validación en preview¶
El preview indica problemas:
Advertencias (amarillo)¶
- Encabezados saltados (H1 → H3)
- Enlaces sin protocolo
- Imágenes sin alt text
Errores (rojo)¶
- Markdown malformado
- Enlaces rotos internos
- Código sin cerrar
Comparar con versión anterior¶
En el preview puedes:
- Hacer clic en Comparar
- Ver las diferencias con la versión guardada
- Las adiciones en verde, eliminaciones en rojo
┌─────────────────────────────────────────────────────────────────┐
│ Comparación │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ## Pasos │
│ │
│ ### 1. Verificación │
│ - Verificar estado del CI │
│ + - Verificar estado del CI en main │
│ + - Confirmar no hay deploys en curso │
│ │
│ ### 2. Backup │
│ - Crear backup │
│ + - Crear snapshot de la base de datos │
│ │
└─────────────────────────────────────────────────────────────────┘
Opciones de visualización¶
Ancho del preview¶
- 50/50: Editor y preview iguales
- 30/70: Más espacio para preview
- 70/30: Más espacio para editor
- Solo editor: Oculta preview
Tema¶
El preview respeta el tema actual (claro/oscuro).
Zoom¶
Usa Ctrl++ / Ctrl+- para ajustar el tamaño.
Imprimir preview¶
Para generar un PDF o imprimir:
- Abre Preview completo
- Usa Ctrl+P
- El navegador abre el diálogo de impresión
- Selecciona "Guardar como PDF" si lo prefieres
Compartir preview¶
Para compartir el preview con alguien:
- Guarda el procedimiento (aunque sea borrador)
- Copia la URL de preview
- Comparte el enlace
Permisos
El destinatario necesita permisos para ver el procedimiento.
Modo presentación¶
Para presentaciones o revisiones:
- En preview completo, haz clic en
- El procedimiento se muestra en pantalla completa
- Navega con las flechas del teclado
- Presiona Esc para salir
Solución de problemas¶
Preview no actualiza¶
- Verifica conexión a internet
- Refresca la página (F5)
- Limpia caché si persiste
Elementos no se renderizan¶
- Verifica la sintaxis Markdown
- Asegúrate de tener líneas vacías entre bloques
- Revisa los mensajes de error
Preview lento¶
- Reduce el tamaño del documento
- Desactiva preview mientras editas secciones largas
- Usa un navegador actualizado
Siguiente: Workspace - Tu área de trabajo interactiva.