Aller au contenu

Mettre en forme le rendu Markdown avec la typographie Tailwind

Vous pouvez utiliser le module d'extension Typography de Tailwind pour mettre en forme le rendu Markdown à partir de sources telles que les collections de contenu d'Astro.

Cette recette vous apprendra à créer un composant Astro réutilisable pour mettre en forme votre contenu Markdown en utilisant les classes utilitaires de Tailwind.

Prérequis

Un projet Astro qui :

Mise en place de @tailwindcss/typography

Tout d'abord, installez @tailwindcss/typography en utilisant votre gestionnaire de paquets préféré.

npm install -D @tailwindcss/typography

Ensuite, ajoutez le paquet en tant que module d'extension dans votre fichier de configuration Tailwind.

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

Recette

  1. Créez un composant <Prose /> pour fournir un élément <div> avec une balise <slot /> pour votre Markdown rendu. Ajoutez la classe de style prose ainsi que les modificateurs d'éléments Tailwind dans l'élément parent.

    ---
---
<div 
  class="prose dark:prose-invert 
  prose-h1:font-bold prose-h1:text-xl 
  prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl 
  prose-headings:underline">
  <slot />
</div>

    :::tipLe module d'extension @tailwindcss/typography utilise des modificateurs d'éléments pour mettre en forme les composants enfants d'un conteneur avec la classe prose.

    Ces modificateurs suivent la syntaxe générale suivante :

    prose-[element]:class-to-apply

    Par exemple, prose-h1:font-bold donne à toutes les balises <h1> la classe Tailwind font-bold.:::

  2. Interrogez votre entrée de collection sur la page où vous voulez afficher votre Markdown. Passez le composant <Content /> de await render(entry) à <Prose /> en tant qu'enfant pour envelopper votre contenu Markdown dans les styles Tailwind.

    ---
import Prose from '../components/Prose.astro';
import Layout from '../layouts/Layout.astro';
import { getEntry, render } from 'astro:content';

const entry = await getEntry('collection', 'entry');
const { Content } = await render(entry);
---
<Layout>
  <Prose>
    <Content />
  </Prose>
</Layout>

Ressources

Contribuer Communauté Parrainer