Preset Typography

Fournit un ensemble de classes prose que vous pouvez utiliser pour ajouter des valeurs par défaut typographiques au HTML vanilla.

Code Source

Installation

pnpm

pnpm add -D @unocss/preset-typography

yarn

yarn add -D @unocss/preset-typography

npm

npm install -D @unocss/preset-typography

bun

bun add -D @unocss/preset-typography

TIP

Ce preset est inclus dans le package unocss, vous pouvez aussi l'importer depuis là :

import { presetTypography } from 'unocss'

Utilisation

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3
} from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // requis quand on utilise le mode attributify
    presetWind3(), // requis
    presetTypography(),
  ],
})

Classes

<article class="text-base prose prose-truegray xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Du texte</p>
</article>

Attributs

<article text-base prose prose-truegray xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Du texte</p>
</article>

WARNING

Note : not-prose ne peut être utilisé que comme classe, pas comme attribut.

Points forts

Toute taille de police

Appliquez n'importe quelle taille de police pour le corps que vous aimez et prose mettra à l'échelle les styles pour les éléments HTML respectifs. Par exemple, prose text-lg a une taille de police de corps de 1.125rem et h1 sera mis à l'échelle avec cette taille 2.25 fois. Voir tous les éléments HTML supportés.

Toute couleur

Appliquez n'importe quelle couleur avec prose-${colorName} par UnoCSS (ex. prose-coolgray, prose-sky) puisque prose n'a aucune couleur par défaut. Voir toutes les couleurs disponibles. Par exemple, prose prose-truegray utilisera les couleurs respectives pour les éléments HTML respectifs.

Mode sombre avec un seul utilitaire

Appliquez le mode sombre typographique avec prose-invert (la couleur de fond doit être gérée par les utilisateurs). Par exemple, prose dark:prose-invert utilisera les couleurs inversées en mode sombre.

Votre propre style

Les styles des éléments non dans prose resteront les mêmes. Pas de réinitialisation de style, comme UnoCSS.

Annuler avec l'utilitaire not

Appliquez not-prose aux éléments pour annuler les styles typographiques. Par exemple, <table class="not-prose"> ignorera les styles de ce preset pour l'élément table (NOTE : l'utilitaire not n'est utilisable qu'en classe puisqu'il n'est utilisé que dans le sélecteur CSS et non scanné par UnoCSS).

Options de compatibilité

Ce preset utilise des pseudo-classes qui ne sont pas largement supportées, mais vous pouvez les désactiver. (#2064)

• Si vous activez noColonNot ou noColonWhere, not-prose sera indisponible.
• Si vous activez noColonIs, le mode attributify aura un comportement incorrect.

Utilitaires

Règle	Styles par cette règle
prose	Voir sur GitHub.

Couleurs

Règles (couleur)
prose-rose
prose-pink
prose-fuchsia
prose-purple
prose-violet
prose-indigo
prose-blue
prose-sky
prose-cyan
prose-teal
prose-emerald
prose-green
prose-lime
prose-yellow
prose-amber
prose-orange
prose-red
prose-gray
prose-slate
prose-zinc
prose-neutral
prose-stone

Options

Ce preset a les configurations selectorName et cssExtend pour les utilisateurs qui aiment remplacer ou étendre.

TIP

Les déclarations CSS passées à cssExtend vont

• remplacer les styles intégrés si les valeurs sont en conflit, sinon
• être fusionnées profondément avec les styles intégrés.

selectorName

• Type: string
• Défaut: prose

Le nom de classe pour utiliser les utilitaires typographiques. Pour annuler les styles aux éléments, utilisez-le comme not-${selectorName} qui est par défaut not-prose.

TIP

L'utilitaire not n'est disponible qu'en classe.

cssExtend

• Type: Record<string, CSSObject>
• Défaut: undefined

Étendre ou remplacer les sélecteurs CSS avec un bloc de déclaration CSS.

compatibility

• Type: TypographyCompatibilityOptions
• Défaut: undefined

Voir Options de compatibilité.

WARNING

Notez que cela affectera certaines fonctionnalités.

interface TypographyCompatibilityOptions {
  noColonWhere?: boolean
  noColonIs?: boolean
  noColonNot?: boolean
}

Exemple

import { presetTypography } from '@unocss/preset-typography'
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // requis si on utilise le mode attributify
    presetWind3(), // requis
    presetTypography({
      selectorName: 'markdown', // maintenant utilisez comme `markdown markdown-gray`, `not-markdown`
      // cssExtend est un objet avec le sélecteur CSS comme clé et
      // le bloc de déclaration CSS comme valeur comme écrire du CSS normal.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Remerciements

• Tailwind CSS Typography
• Windi CSS Typography