Estilos

Un estilo define todo el aspecto de la vista previa: tipografía, colores, espaciado, y el estilo del código y de los avisos. PeepMD incluye una colección de estilos integrados, entre ellos GitHub, el predeterminado, con el que se muestra este manual, y puedes añadir los tuyos.

Cambiar de estilo

Haz clic o toca el nombre del estilo a la derecha de la barra de estado, o en el ornamento de la esquina inferior derecha de la ventana en Vision Pro. En el Mac y el iPad, un menú muestra todos los estilos; elige uno y la vista previa cambia de estilo con la posición de desplazamiento intacta. En el iPhone no cabe un menú, así que el nombre abre los Ajustes en el panel Tema. La elección se mantiene entre aperturas de la app y se aplica a todos los documentos que abras.

Temas de código

Un estilo lleva sus propios colores para los bloques de código. Un tema de código los sustituye: el fondo y el texto del bloque, y los colores de las palabras clave, las cadenas, los números, los nombres y los comentarios, sobre el estilo que esté activo. Hay ocho integrados. GitHub, One, Solarized y Xcode siguen el modo claro y el oscuro. Reading, Nord, Monokai y Dracula son bloques oscuros en cualquier página.

Elige uno en Código, en Ajustes → Tema, el panel Tema de los Ajustes en iPad, iPhone y Vision Pro. Seguir el estilo es la opción predeterminada: los colores del propio estilo. El tema viaja con el documento a las exportaciones PDF y HTML y al correo.

Añadir estilos propios

En el Mac, abre Ajustes → Tema con ⌘,, con el engranaje a la izquierda de la barra de estado o con Gestionar estilos… en el menú de la barra de estado. Los estilos integrados y los personalizados están en dos listas, una encima de la otra:

• Importar estilo… copia archivos .css en tu carpeta de estilos, o puedes soltar los archivos en la carpeta tú mismo (Abrir carpeta de estilos te lleva allí). Cada archivo aparece en la lista con su nombre de archivo.
• Eliminar manda a la papelera el estilo personalizado que tienes seleccionado. Los integrados no se pueden eliminar, así que el botón solo está activo en la lista de abajo.
• Haz clic en una fila de cualquiera de las dos listas para activar ese estilo.

En iPad y iPhone, toca el engranaje de la barra de estado flotante y elige Tema; en Vision Pro es el engranaje del ornamento bajo la ventana. Los estilos integrados y los personalizados aparecen bajo sus propios encabezados; toca uno para usarlo, Importar estilo… trae un archivo .css desde Archivos, y al deslizar un estilo personalizado se elimina.

Escribir un estilo

Una hoja de estilo es un reemplazo completo, no un parche. El documento renderizado va envuelto en:

<article class="markdown-body">
  …tu documento…
</article>

así que apunta a .markdown-body como lo hace la hoja de estilo de GitHub. El punto de partida práctico es una copia de un estilo integrado, recortada y adaptada a tu gusto. En el Mac están dentro de la propia app, en PeepMD.app/Contents/Resources/GitHub.css. Un estilo ve el mismo HTML que produce cualquier documento: los encabezados llevan ids de ancla, los avisos son bloques .markdown-alert, las marcas de CriticMarkup llevan una clase .critic y los bloques de código llevan clases language-*.

Los estilos son de cada dispositivo. Escribir uno es trabajo del Mac, y el .css terminado se puede enviar a un iPad e importarlo allí.

Los cambios de estilo hechos en el disco se aplican en el siguiente renderizado: guarda el CSS y pulsa ⌘R en la vista previa (desliza hacia abajo para actualizar en iPad y iPhone).

Modo claro y modo oscuro

La vista previa sigue la apariencia con la que se ejecuta PeepMD, que es la del sistema o la que hayas elegido en Ajustes → Apariencia, y tu hoja de estilo decide cómo responder. Hay dos estrategias:

Adaptarse. Define tus colores claros de forma normal, sustitúyelos luego dentro de una media query y declara los dos esquemas para que las barras de desplazamiento y los controles de WebKit coincidan:

:root { color-scheme: light dark; }

.markdown-body {
  color: #1f2328;
  background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color: #d8d8d8;
    background-color: #1e1e1e;
  }
  /* ...y los enlaces, fondos de código, bordes... */
}

Quedarse con un solo aspecto. Un estilo con una identidad fuerte, como papel crema o papel de periódico, puede seguir igual en modo oscuro, siempre que lo declare y pinte su propio fondo:

:root { color-scheme: light; }
html { background-color: #ffffff; }

Sin una de las dos, un estilo solo claro sobre una ventana oscura muestra texto oscuro sobre fondo oscuro. El GitHub.css integrado es un ejemplo completo de la estrategia adaptable, con toda su paleta definida dos veces como variables CSS.

Usar variables CSS para cada color, como hace GitHub.css, reduce la sustitución para el modo oscuro a un bloque pequeño en lugar de una segunda hoja de estilo.

---

Anterior: Exportar y compartir · Siguiente: Ajustes