Preset Tipografia

Fornisce un insieme di classi prose che puoi usare per aggiungere impostazioni tipografiche predefinite all'HTML puro.

Codice Sorgente

Installazione

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

Questo preset è incluso nel pacchetto unocss, puoi anche importarlo da lì:

import { presetTypography } from 'unocss'

Utilizzo

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

export default defineConfig({
  presets: [
    presetAttributify(), // richiesto quando si usa la modalità attributify
    presetWind3(), // richiesto
    presetTypography(),
  ],
})

Classi

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

Attributi

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

WARNING

Nota: not-prose può essere usato solo come classe, non come attributo.

Caratteristiche principali

Qualsiasi dimensione del font

Applica qualsiasi dimensione del font per il body che preferisci e prose scalerà gli stili per i rispettivi elementi HTML. Ad esempio, prose text-lg ha la dimensione del font del body 1.125rem e h1 scalerà con quella dimensione 2.25 volte. Vedi tutti gli elementi HTML supportati.

Qualsiasi colore

Applica qualsiasi colore con prose-${colorName} di UnoCSS (ad es. prose-coolgray, prose-sky) poiché prose non ha alcun colore per impostazione predefinita. Vedi tutti i colori disponibili. Ad esempio, prose prose-truegray userà i rispettivi colori per i rispettivi elementi HTML.

Modalità scura con una singola utility

Applica la modalità tipografica scura con prose-invert (il colore di sfondo deve essere gestito dagli utenti). Ad esempio, prose dark:prose-invert userà i colori invertiti nella modalità scura.

Il tuo stile personale

Gli stili degli elementi non all'interno di prose rimarranno gli stessi. Nessun reset dello stile, proprio come UnoCSS.

Annulla con l'utility not

Applica not-prose agli elementi per annullare gli stili tipografici. Ad esempio, <table class="not-prose"> salterà gli stili di questo preset per l'elemento table (NOTA: l'utility not è utilizzabile solo come classe poiché è utilizzata solo nel selettore CSS e non viene scansionata da UnoCSS).

Opzioni di compatibilità

Questo preset usa alcune pseudo-classi che non sono ampiamente supportate, ma puoi disabilitarle. (#2064)

• Se abiliti noColonNot o noColonWhere, not-prose non sarà disponibile.
• Se abiliti noColonIs, la modalità attributify avrà un comportamento errato.

Utility

Regola	Stili di questa regola
prose	Vedi su GitHub.

Colori

Regole (colore)
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

Opzioni

Questo preset ha configurazioni selectorName e cssExtend per gli utenti che amano sovrascrivere o estendere.

TIP

Le dichiarazioni CSS passate a cssExtend:

• sovrascriveranno gli stili incorporati se i valori sono in conflitto, altrimenti
• verranno unite in profondità con gli stili incorporati.

selectorName

• Tipo: string
• Predefinito: prose

Il nome della classe per usare le utility tipografiche. Per annullare gli stili agli elementi, usalo come not-${selectorName} che per impostazione predefinita è not-prose.

TIP

L'utility not è disponibile solo come classe.

cssExtend

• Tipo: Record<string, CSSObject>
• Predefinito: undefined

Estendi o sovrascrivi i selettori CSS con un blocco di dichiarazione CSS.

compatibility

• Tipo: TypographyCompatibilityOptions
• Predefinito: undefined

Vedi Opzioni di compatibilità.

WARNING

Nota che influenzerà alcune funzionalità.

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

Esempio

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

export default defineConfig({
  presets: [
    presetAttributify(), // richiesto se si usa la modalità attributify
    presetWind3(), // richiesto
    presetTypography({
      selectorName: 'markdown', // ora usa come `markdown markdown-gray`, `not-markdown`
      // cssExtend è un oggetto con selettore CSS come chiave e
      // blocco di dichiarazione CSS come valore come scrivere CSS normale.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Ringraziamenti

• Tailwind CSS Typography
• Windi CSS Typography