¿Cómo mejorar la presentación de contenido Markdown con Tailwind?
Si alguna vez te has encontrado con un contenido en Markdown que no se ve tan atractivo como te gustaría, estás en el lugar correcto. Gracias a Tailwind CSS, puedes darle a tus escritos en Markdown un estilo mucho más profesional y visualmente atractivo. Vamos a ver cómo puedes lograr una presentación impecable y responsive utilizando las capacidades de Tailwind y algunos plugins adicionales.
¿Qué necesitas para empezar?
Primero, necesitas asegurarte de tener Tailwind CSS integrado en tu proyecto. En este caso, vamos a añadir el soporte de tipografía que Tailwind ofrece mediante un plugin especial. Aquí están los pasos para comenzar:
Detén tu entorno de desarrollo.
Instala el plugin de tipografía de Tailwind con el siguiente comando en la terminal:
npm install --save-dev @tailwindcss/typography
Incluye este plugin en la configuración de tu proyecto Tailwind. Para esto, agrega el plugin en Tailwind dentro del archivo de configuración tailwind.config.js:
module.exports = { plugins: [ require('@tailwindcss/typography'), ], }
¿Cómo integrar Tailwind en tu diseño?
Ahora que tienes el plugin instalado, es momento de aplicarlo en tu diseño. Esto lo harás utilizando la clase prose de Tailwind, que ofrece estilos predeterminados para tipografía. Aplícala en las clases de utilidad de tu contenedor principal:
Actualiza tu archivo de diseño para incluir la clase:
<main class="prose"> <!-- Aquí va tu contenido en Markdown --> </main>
Con este sencillo ajuste, notarás que tu contenido en Markdown se visualiza de forma más agradable, con una tipografía legible y bien estructurada. Los elementos como listas, títulos y negritas se presentarán de manera uniforme y profesional.
¿Cómo añadir lógica JavaScript con MDX?
El siguiente paso es llevar las cosas un poco más allá utilizando MDX, una combinación de Markdown y JSX, que te permitirá no solo escribir contenido, sino también ejecutar lógica de JavaScript en tus archivos. Esto es particularmente útil cuando deseas hacer tu contenido más interactivo y dinámico.
¿Cómo integrar MDX en tu proyecto?
Primero, necesitas asegurarte de tener Astro o cualquier otro marco que soporte MDX. Sigue estos pasos para configurar MDX:
En tu terminal, usa el comando para añadir MDX:
npx astro add mdx
Confirma las indicaciones que aparecerán para instalar las dependencias necesarias y añadir el soporte a tu archivo de configuración principal.
¿Cómo crear archivos MDX?
Una vez configurado, puedes crear un nuevo archivo .mdx y comenzar a crear contenido que haga uso de JavaScript.
Crea un archivo nuevo llamado hello.mdx:
export const data = { date: new Date().toLocaleDateString(), }; # Hola MDX La fecha actual es: {data.date}
Este simple archivo MDX demuestra cómo puedes declarar variables y utilizarlas dentro del contenido para introducir elementos dinámicos en tus páginas. Ahora podrás ejecutar lógica compleja directamente en los documentos que estructuran tu sitio web.
¿Cómo continuar mejorando y personalizando tu proyecto?
Con estas configuraciones básicas, ya tendrás un sitio con buen aspecto y funcional. Sin embargo, puedes personalizar aún más los estilos y las configuraciones según tus necesidades específicas. Tailwind y MDX ofrecen una flexibilidad inmensa para:
Mantén tus configuraciones al día, revisa siempre la documentación oficial de Tailwind y MDX, y no dudes en experimentar. Comparte tus avances y colabora con la comunidad para seguir aprendiendo y mejorando. ¡El desarrollo web es un viaje lleno de oportunidades!
Si alguna vez te has encontrado con un contenido en Markdown que no se ve tan atractivo como te gustaría, estás en el lugar correcto. Gracias a Tailwind CSS, puedes darle a tus escritos en Markdown un estilo mucho más profesional y visualmente atractivo. Vamos a ver cómo puedes lograr una presentación impecable y responsive utilizando las capacidades de Tailwind y algunos plugins adicionales.
Primero, necesitas asegurarte de tener Tailwind CSS integrado en tu proyecto. En este caso, vamos a añadir el soporte de tipografía que Tailwind ofrece mediante un plugin especial. Aquí están los pasos para comenzar:
Detén tu entorno de desarrollo.
Instala el plugin de tipografía de Tailwind con el siguiente comando en la terminal:
npm install --save-dev @tailwindcss/typography
Incluye este plugin en la configuración de tu proyecto Tailwind. Para esto, agrega el plugin en Tailwind dentro del archivo de configuración tailwind.config.js:
module.exports = {
plugins: [
require('@tailwindcss/typography'),
],
}
Ahora que tienes el plugin instalado, es momento de aplicarlo en tu diseño. Esto lo harás utilizando la clase prose de Tailwind, que ofrece estilos predeterminados para tipografía. Aplícala en las clases de utilidad de tu contenedor principal:
Actualiza tu archivo de diseño para incluir la clase:
<main class="prose">
<!-- Aquí va tu contenido en Markdown -->
</main>
Con este sencillo ajuste, notarás que tu contenido en Markdown se visualiza de forma más agradable, con una tipografía legible y bien estructurada. Los elementos como listas, títulos y negritas se presentarán de manera uniforme y profesional.
El siguiente paso es llevar las cosas un poco más allá utilizando MDX, una combinación de Markdown y JSX, que te permitirá no solo escribir contenido, sino también ejecutar lógica de JavaScript en tus archivos. Esto es particularmente útil cuando deseas hacer tu contenido más interactivo y dinámico.
Primero, necesitas asegurarte de tener Astro o cualquier otro marco que soporte MDX. Sigue estos pasos para configurar MDX:
En tu terminal, usa el comando para añadir MDX:
npx astro add mdx
Confirma las indicaciones que aparecerán para instalar las dependencias necesarias y añadir el soporte a tu archivo de configuración principal.
Una vez configurado, puedes crear un nuevo archivo .mdx y comenzar a crear contenido que haga uso de JavaScript.
Crea un archivo nuevo llamado hello.mdx:
export const data = {
date: new Date().toLocaleDateString(),
};
# Hola MDX
La fecha actual es: {data.date}
Este simple archivo MDX demuestra cómo puedes declarar variables y utilizarlas dentro del contenido para introducir elementos dinámicos en tus páginas. Ahora podrás ejecutar lógica compleja directamente en los documentos que estructuran tu sitio web.
Con estas configuraciones básicas, ya tendrás un sitio con buen aspecto y funcional. Sin embargo, puedes personalizar aún más los estilos y las configuraciones según tus necesidades específicas. Tailwind y MDX ofrecen una flexibilidad inmensa para:
Mantén tus configuraciones al día, revisa siempre la documentación oficial de Tailwind y MDX, y no dudes en experimentar. Comparte tus avances y colabora con la comunidad para seguir aprendiendo y mejorando. ¡El desarrollo web es un viaje lleno de oportunidades!
En la version nueva de astro y tailwind el archivo tailwind.config.mjs seguramente no aparezca, solo se creara la carpeta styles con global.css dentro, donde la configuración dentro es solo la importación de los elementos:
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
Para visualizar correctamente archivos MDX en Visual Studio Code, necesitas instalar la extensión "MDX" o "MDX Preview". Estas extensiones proporcionan soporte para la sintaxis de MDX, lo que permite a VSC reconocer y renderizar correctamente el contenido.
Puedes buscarlas en el Marketplace de extensiones de VSC e instalarlas. Después de la instalación, reinicia VSC y deberías poder ver tu archivo MDX correctamente formateado.
Recuerda que MDX combina Markdown con componentes de React, así que asegúrate de tener configurado correctamente tu entorno de trabajo con React si estás usando Astro.
Se pueden hasta hacer peticiones, esta genial
---
title: Hola
layout: ../../layouts/MainLayout.astro
---
export const res = await fetch('https://pokeapi.co/api/v2/pokemon/41/')
export const data = await res.json()
export const title = data.name;
# {data.name}
## Moves
{data.moves.map(({move})=>move.name).join(", ")}
Alguien sabe como ver los recursos?
¿Alguien me podría decir que se hizo la sección de recursos?
El comando para instalar el plugin de Tailwind que da estilo a los archivos markdown es:
npm install -D @tailwindcss/typography
Y para agregarlo a la config de tailwind es:
require("@tailwindcss/typography")
---
layout: ../../layouts/BlogBase.astro
title: 'El Impacto de la Navidad en la Investigación Espacial'
date: '2021-10-01'
---
export const data = {
author: 'John Doe',
}
*-{data.author}*
La Navidad, una festividad llena de tradición y unión, también ha dejado su huella en la historia de la exploración espacial. Desde pequeños gestos simbólicos hasta eventos que marcaron hitos en la ciencia, la Navidad ha acompañado a astronautas y científicos incluso fuera de la Tierra.
## Eventos Notables
- **Apolo 8 (1968):** Durante la misión que orbitó la Luna, los astronautas Frank Borman, Jim Lovell y William Anders transmitieron un mensaje navideño leyendo el Génesis de la Biblia, un gesto que impactó a millones de personas en la Tierra.
- **Skylab 4 (1973):** La tripulación improvisó un árbol de Navidad utilizando latas de comida y materiales reciclados, demostrando creatividad y humanizando la experiencia espacial.
- **Estación Espacial Internacional (ISS):** Cada año, las tripulaciones celebran la Navidad con una cena especial, videollamadas familiares y pequeños intercambios de regalos.
## Impacto en la Ciencia
- **Gestión del Tiempo:** Las festividades obligan a planificar cuidadosamente el calendario de investigaciones para permitir a los astronautas momentos de descanso sin afectar experimentos críticos.
- **Bienestar Psicológico:** Celebrar la Navidad a bordo mejora el ánimo y reduce el estrés, factores clave para el rendimiento de las tripulaciones en misiones prolongadas.
## Curiosidades
- Los astronautas en la ISS pueden recibir pequeños obsequios enviados en naves de reabastecimiento.
- En 2011, la sonda Voyager 1 envió datos desde el espacio interestelar justo en Navidad, simbolizando un regalo inesperado para la comunidad científica.
La Navidad, incluso en el frío y vasto espacio, sigue siendo un recordatorio del espíritu humano y su capacidad para llevar la calidez del hogar hasta las estrellas.
---
// BlogBase.astro
import '../styles/global.css';
const { frontmatter } = Astro.props;
---
<!doctype html>
<html lang="es-mx">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
{frontmatter.title}
</title>
</head>
<body>
<main class="container mx-auto px-4">
<header class="my-8">
<h1 class="text-4xl font-bold">{frontmatter.title}</h2>
<p class="text-gray-600">{frontmatter.date}</p>
</header>
<article class="prose lg:prose-xl">
<slot />
</article>
<footer class="my-8">
<p class="text-sm text-gray-500">
© {new Date().getFullYear()} Your Blog Name. All rights reserved.
</p>
</footer>
</main>
</body>
</html>
Muy bueno este aprendizaje y la enseñanza del profesor, tenia tiempo sin programar en web, ya que soy programador móvil, pero esta herramienta me esta dando mucho entusiasmo para dedicarle su merecido aprendizaje para lograr más cosas.
Así se ve:
Y así va el código:
---layout: ../../layouts/base.astrotitle: "Página MDX"author: "Julio Mérida"--- {/* Encabezado con diseño personalizado */}<div className="bg-gray-100 p-6 rounded-md shadow-md text-center"> <h1 className="text-4xl font-bold text-blue-700">{frontmatter.title}</h2> <p className="text-lg text-gray-600 mt-2">Por: <span className="font-medium text-blue-500">{frontmatter.author}</span></p></div> {/* Separador decorativo */}<div className="w-16 h-1 bg-blue-500 mx-auto my-6 rounded"></div> {/* Fecha actual con estilo */}<div className="p-4 my-4 bg-gray-100 border-l-4 border-blue-500"> <p className="text-sm text-gray-600">La fecha actual es:</p> <p className="text-lg font-bold text-blue-600">{new Date().toLocaleDateString()}</p></div> {/* Bloque con gradiente y bienvenida */}<div className="p-6 bg-gradient-to-r from-blue-400 to-green-400 text-white rounded-md shadow-md mb-6"> <h2 className="text-2xl font-bold">¡Bienvenido a mi página de ejemplo del curso de Astro!</h3> <p className="mt-2">Aquí hay algunas de las cosas que se pueden agregar</p></div> {/* Tarjetas con contenido organizado */}<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8"> {/* Tarjeta 1 */} <div className="p-4 bg-white shadow rounded-md"> <h3 className="text-xl font-semibold text-gray-800">Tarjeta 1</h4> <p className="text-gray-600">Blah blah blah</p> </div> {/* Tarjeta 2 */} <div className="p-4 bg-white shadow rounded-md"> <h3 className="text-xl font-semibold text-gray-800">Tarjeta 2</h4> <p className="text-gray-600">Algo interesante</p> </div></div> {/* Botón con diseño atractivo */}<a href="/contact" className="mt-4 inline-block px-6 py-3 bg-blue-500 text-white font-medium rounded-lg shadow hover:bg-blue-600 transition-all duration-300"> Botón de acción</a> {/* Encabezado con animación al pasar el ratón */}<h2 className="text-3xl font-bold hover:text-blue-500 transition-all duration-300 mt-8 cursor-pointer"> Esta línea cambia de color al pasar el curso por encima</h3>
---
layout: ../../layouts/base.astro
title: "Página MDX"
author: "Julio Mérida"
---
{/* Encabezado con diseño personalizado */}
<div className="bg-gray-100 p-6 rounded-md shadow-md text-center">
<h1 className="text-4xl font-bold text-blue-700">{frontmatter.title}</h2>
<p className="text-lg text-gray-600 mt-2">Por: <span className="font-medium text-blue-500">{frontmatter.author}</span></p>
</div>
{/* Separador decorativo */}
<div className="w-16 h-1 bg-blue-500 mx-auto my-6 rounded"></div>
{/* Fecha actual con estilo */}
<div className="p-4 my-4 bg-gray-100 border-l-4 border-blue-500">
<p className="text-sm text-gray-600">La fecha actual es:</p>
<p className="text-lg font-bold text-blue-600">{new Date().toLocaleDateString()}</p>
</div>
{/* Bloque con gradiente y bienvenida */}
<div className="p-6 bg-gradient-to-r from-blue-400 to-green-400 text-white rounded-md shadow-md mb-6">
<h2 className="text-2xl font-bold">¡Bienvenido a mi página de ejemplo del curso de Astro!</h3>
<p className="mt-2">Aquí hay algunas de las cosas que se pueden agregar</p>
</div>
{/* Tarjetas con contenido organizado */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
{/* Tarjeta 1 */}
<div className="p-4 bg-white shadow rounded-md">
<h3 className="text-xl font-semibold text-gray-800">Tarjeta 1</h4>
<p className="text-gray-600">Blah blah blah</p>
</div>
{/* Tarjeta 2 */}
<div className="p-4 bg-white shadow rounded-md">
<h3 className="text-xl font-semibold text-gray-800">Tarjeta 2</h4>
<p className="text-gray-600">Algo interesante</p>
</div>
</div>
{/* Botón con diseño atractivo */}
<a href="/contact" className="mt-4 inline-block px-6 py-3 bg-blue-500 text-white font-medium rounded-lg shadow hover:bg-blue-600 transition-all duration-300">
Botón de acción
</a>
{/* Encabezado con animación al pasar el ratón */}
<h2 className="text-3xl font-bold hover:text-blue-500 transition-all duration-300 mt-8 cursor-pointer">
Esta línea cambia de color al pasar el curso por encima
</h3>