El panel de vista previa de Markdown en MarkNode se puede personalizar con distintos temas. Elige un aspecto integrado, deja que la vista previa siga automáticamente el tema de tu aplicación o escribe tu propio CSS para que coincida con el lugar donde se publicarán tus documentos.
Seguir el tema de la aplicación
De forma predeterminada, la vista previa está configurada como Coincidir con el tema de la app: utiliza el estilo integrado que combina con tu tema de la aplicación actual, de modo que cambiar de Paper a Midnight (o a cualquier otro tema) recolorea la vista previa para que coincida con una sola acción. No tienes que elegir ningún tema de vista previa, a menos que quieras un aspecto distinto del resto de la aplicación.
Temas integrados
MarkNode incluye un conjunto de temas de vista previa integrados disponibles para todos los usuarios. Son de solo lectura y no se pueden modificar, pero siempre puedes copiar uno como punto de partida para un tema personalizado. Junto a los estilos que combinan con cada tema de la aplicación (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), hay aspectos específicos según el lugar de publicación y el ambiente, como:
- GitHub Light y GitHub Dark: representación al estilo de GitHub para documentación
- Solarized Light y Solarized Dark: las paletas de Solarized
- Serif: una columna centrada con tipografía serif para textos extensos
- Compact: un diseño más ajustado para material de referencia denso
- Academic, Newsprint, Dracula y más
Los temas integrados derivan sus colores base de fondo, texto, enlaces y bordes de tu tema de aplicación activo, por lo que se ven bien tanto en claro como en oscuro sin que tengas que volver a elegir nada. (También existe un estilo interno Default que respalda Coincidir con el tema de la app; en el menú eliges Coincidir con el tema de la app en lugar de Default directamente.)
Para cambiar de tema, haz clic en el botón de estilo de vista previa en el encabezado del panel de vista previa, o haz clic derecho en cualquier parte de la vista previa y usa la lista de estilos. Elige Coincidir con el tema de la app para volver a seguir el tema de la aplicación, o elige cualquier estilo específico para fijarlo. El cambio se aplica de inmediato a todas las superficies de vista previa —la vista previa acoplada junto al editor y cualquier ventana de vista previa que hayas desacoplado— y se recuerda entre sesiones.
Crear un tema personalizado
Desde el menú de estilos de vista previa, elige Nuevo estilo a partir de este… para crear un tema personalizado basado en el que esté activo en ese momento:
- Introduce un nombre para tu nuevo tema. Los nombres no pueden coincidir con el de un tema integrado.
- Se abre el editor de CSS con el CSS de origen ya cargado; edítalo a tu gusto.
A medida que escribes, la vista previa se vuelve a representar en vivo. El CSS se mantiene en memoria hasta que guardas, así que puedes experimentar con libertad; si cambias de opinión, cierra el editor para descartar tus modificaciones.
Para editar un tema personalizado que ya hayas creado, selecciónalo y elige Editar estilo actual… en el mismo menú.
Guardar y compartir
Cuando guardas un tema personalizado, se almacena en tu biblioteca global de temas, por lo que está disponible en todos los proyectos de este equipo. También puedes marcar Guardar una copia en el proyecto actual para escribirlo dentro del proyecto, lo que significa que el tema viaja con él. Si registras el proyecto en Git, cada colaborador que clone el repositorio verá la misma vista previa.
Cuando abres un proyecto que contiene un tema de vista previa personalizado que aún no tienes, ese tema aparece en tu lista de estilos mientras el proyecto esté abierto.
Qué puede personalizar el CSS propio
El CSS personalizado está delimitado al contenedor de la vista previa (.markdown-preview), por lo que no afecta al editor, la barra lateral ni a ninguna otra parte de MarkNode. Puedes personalizar:
- Fuentes y tamaños del cuerpo del texto
- Encabezados, listas, citas y tablas
- Bloques de código, código en línea y colores del resaltado de sintaxis
- Espaciado, relleno y el ancho máximo del contenido
Si quieres que tu tema personalizado se adapte automáticamente al modo claro y oscuro igual que los integrados, empieza duplicando un tema integrado: tu copia hereda esa base compatible con temas y podrás ajustarla desde ahí.
No es posible reestructurar el DOM de forma profunda, ya que el CSS solo ajusta la presentación visual, no el HTML subyacente.
Eliminar un tema personalizado
Selecciona un tema personalizado y usa la acción de eliminar en el menú de estilos. Primero aparece una confirmación. Si el tema que eliminas es el activo, MarkNode vuelve al tema integrado predeterminado. Los temas integrados no tienen acción de eliminar y no se pueden quitar.