Aller au contenu

Styliser le rendu Markdown avec la typographie Tailwind

Vous pouvez utiliser le plugin Typography de Tailwind pour styliser 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 styliser votre contenu Markdown en utilisant les classes utilitaires de Tailwind.

Prérequis

Titre de la section Prérequis

Un projet Astro qui :

Mise en place de @tailwindcss/typography

Titre de la section Mise en place de @tailwindcss/typography

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

Fenêtre de terminal
npm install -D @tailwindcss/typography

Ensuite, ajoutez le paquet en tant que plugin dans votre fichier de configuration Tailwind.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
   require('@tailwindcss/typography'),
    // ...
  ],
}

Recette

Titre de la section 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.

    src/components/Prose.astro
    ---
    ---
    <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>

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

    src/pages/index.astro
    ---
    import Prose from '../components/Prose.astro';
    import Layout from '../layouts/Layout.astro';
    import { getEntry } from 'astro:content';
    

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

Resources

Titre de la section Resources