Markdoc es una herramienta de Stripe para formatear archivos markdown a HTML, mediante la creación de un AST (Abstract Syntax Tree). Y hay que reconocer que la documentación puede ser un poco abrumadora para quienes quieren rápidamente usar esta herramienta y no saber exactamente cómo funciona.
Por eso, aquí te dejo los pasos que yo seguí:
Instalando
Configurando del lado del servidor
Primero vamos a crear una función que utilice markdoc en el servidor, y que me devuelva el AST de mi contenido.
El nombre de tu archivo puede terminar en .server.ts para asegurarte de que el código solo corra del lado del servidor.
Esta función recibe un string de markdown y devuelve el AST transformado. Justo lo que necesito.
🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube.
Configurando el componente del cliente
Ahora vamos a crear un componente que reciba el AST y lo renderice como JSX.
Agregando Prism.js
Para el syntax highlighting de los bloques de código, estoy usando Prism.js. Para usarlo en tu proyecto, solo debes agregar la hoja de estilos que desees en tu root.tsx:
Creando el detalle del blog
Ahora, en tu ruta dinámica de Remix, puedes usar ambas funciones:
Resumen
Con estos pasos ya tienes:
- ✅ Markdoc instalado
- ✅ Una función de servidor que parsea markdown a AST
- ✅ Un componente que renderiza el AST como JSX
- ✅ Syntax highlighting con Prism.js
- ✅ Una ruta dinámica para mostrar tus posts
Si quieres profundizar más, te recomiendo revisar la documentación oficial de Markdoc y Prism.js. Y si quieres entender mejor qué es un AST, te dejo este artículo sobre Abstract Syntax Trees.
Abrazo. Bliss. 🤓
¡Ohh, la UI!, ¿librerías de CSS o librerías de componentes, cuál usar?
Checa este otro Post
