CSS para el Markdown

Markdown es un lenguaje fácil de aprender, es muy popular entre geeks que suelen escribir.

Es un formato para escribir texto enriquecido sin HTML pero que termina siéndolo. 🤯

Lo que escribas con Markdown terminará siendo nodos HTML gracias a Markdoc.

La apariencia de estos nodos estará a cargo de CSS. Siempre es bueno tener noción de CSS, porque como puedes darte cuenta, no se puede huir de él. 🥲 

Aunque uses Tailwind, no te recomiendo dejar de aprender CSS, siempre se puede aprender un poco más. 🤓

Tailwind CSS primero

Ya tenemos instalado Tailwind CSS, así que lo vamos a emplear para estilizar el JSX de la ruta, pero usaremos una hoja de estilos CSS para estilizar el Markdown.

Vamos con la página primero.

// app/routes/dash_.$postSlug.tsx

export default function PostDetail() {
  const { content, post } = useLoaderData<typeof loader>();

  return (
    <>
      <main className="max-w-2xl mx-auto py-20 ">
        <Avatar date={new Date(post.createdAt)} author={post.author} />
        <Suspense fallback={<p>Cargando...</p>}>
          <ContentToJSX content={content} />
        </Suspense>
      </main>
    </>
  );
}

Toma nota de que hemos colocado de una vez el useLoaderData y definido lo mínimo requerido por parte del loader.

Con esto tenemos una página con un ancho cómodo para leer, además de un formato limpio que no distrae a nuestro lector. 📖

Componente Avatar

Ahora vamos a estilizar nuestro componente Avatar que requerirá el nombre del autor, y también la fecha de publicación del post. Toma en cuenta esto para escribir el loader.

// app/components/Avatar.tsx

import type { User } from "@prisma/client";

export default function Avatar({
  author,
  date = new Date(),
}: {
  date: Date;
  author: User;
}) {
  const { picture, name } = author;
  return (
    <div className="flex gap-2 items-center">
      <img
        className="border-4 border-indigo-500 rounded-full max-w-[60px] bg-indigo-200"
        src={picture}
        alt="avatar"
      />
      <div>
        <p>{name}</p>
        <p className="font-medium text-xs py-1">{date.toLocaleDateString()}</p>
      </div>
    </div>
  );
}

Puedes usar el tipo que viene de prisma o el que ya incluye el repositorio en el archivo zod.tsx.

Este componente devolverá una imagen junto al nombre del autor y la fecha de creación. 📅

Ahora sí, vamos a escribir el CSS para el Markdown

Para esto, crearemos el archivo de estilos: /app/styles/markdown.css, esto lo haremos directamente en la carpeta styles dentro de app:

app/styles/markdown.css

Con Remix, una vez que tenemos un archivo CSS, no necesariamente necesitamos importar estos estilos de forma global, podemos hacerlo solo por ruta.

Vamos entonces a insertar este archivo solamente en la ruta de detalle.

// app/routes/blog_.$postSlug.tsx

import styles from "~/styles/prismjs.css";
// Importamos 🧩
import markdownStyles from "~/styles/markdown.css";

export const links = () => [
  {
    rel: "stylesheet",
    href: styles,
  },
// Inyectamos 💉
  {
    rel: "stylesheet",
    href: markdownStyles,
  },
];

Para insertar un archivo CSS en Remix, basta con importarlo con el nombre preferido, para luego agregarlo al array de la función links.

La función links es otra de las funciones que podemos exportar desde una ruta. Esta, sirve justamente para declarar etiquetas <link> que descarguen recursos, como siempre se ha hecho en HTML.

👀 Si hemos instalado Prismjs, la hoja de estilos debería incluirse en la función links.

Escribiendo el CSS para Markdown

Podemos estilizar muchas cosas del Markdown, algunas más complejas que otras como <quotation>, puedes sumergirte en el mundo de Markdown y seguro será fructífero para tu carrera, pero por ahora, para no distraernos de nuestro objetivo y conseguir pasar a la siguiente lección, vamos a estilizar lo más básico; encabezados (<h1>,<h2>,<h3>), párrafos (<p>) y <code>

¡Porque nuestro blog es sobre programación, obviamente! 🤓

// app/styles/markdown.css

h3 {
  font-size: 22px;
  margin: 16px 0;
  font-weight: 200;
  line-height: 24px;
}
h2 {
  font-size: 28px;
  margin: 16px 0;
  line-height: 28px;
}
h1 {
  font-size: 32px;
  margin: 16px 0;
}
p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
pre {
  margin: 16px 0;
}*

Allá afuera en la jungla, hay una cantidad interminable de documentos CSS pensados para estilizar Markdown. Puedes descargar alguno, usa el que tu prefieras, échale un ojo a Prismjs. Te dejo un video.

Pero para este curso, basta con estas 5 pequeñas modificaciones para que nuestro blog se vea suficientemente bien. 🎨 

👀  Tómate el tiempo de estilizar tu blog a tu gusto, así reflejará tu personalidad. 👩🏻‍🎨🖼️

Probando los estilos

Si visitamos la ruta de detalle de alguno de nuestros post, alguno que **tengan suficiente contenido Markdown, como bloques de código, varios párrafos y títulos, nos encontraremos con algo así.

¡Chulada! ¿Apoco no? 😻

Nuestro detalle de post es el más sencillo del mundo, también el más hermoso. 🥹

¡Ve nomás hasta donde has llegado! Una cerveza para este geek. 🫵🏼🍺

Enlaces relacionados

Prismjs

https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript

Tutorial Prismjs

https://youtu.be/tiGbb4CcmMA