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.

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'),
// ...
],
}
  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>
Contribuer

Comment pouvons-nous vous aider ?

Créer une issue GitHub

Le moyen le plus rapide d'alerter notre équipe d'un problème.

Communauté