Typography preset

Tillhandahåller en uppsättning prosaklasser du kan använda för att lägga till typografiska standardvärden till vanlig HTML.

Källkod

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

Denna preset ingår i unocss-paketet, du kan också importera den därifrån:

import { presetTypography } from 'unocss'

Användning

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

export default defineConfig({
  presets: [
    presetAttributify(), // krävs vid användning av attributify-läge
    presetWind3(), // krävs
    presetTypography(),
  ],
})

Klasser

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

Attribut

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

WARNING

Observera: not-prose kan endast användas som en klass, inte som ett attribut.

Höjdpunkter

Valfri teckenstorlek

Tillämpa valfri teckenstorlek för brödtext du vill ha och prose kommer att skala stilarna för respektive HTML-element. Till exempel har prose text-lg brödtextstorlek 1.125rem och h1 kommer att skala med den storleken 2,25 gånger. Se alla supported HTML-element.

Valfri färg

Tillämpa valfri färg med prose-${colorName} av UnoCSS (t.ex. prose-coolgray, prose-sky) eftersom prose inte har någon färg som standard. Se alla tillgängliga färger. Till exempel kommer prose prose-truegray att använda respektive färger för respektive HTML-element.

Mörkt läge med ett enda verktyg

Tillämpa typografiskt mörkt läge med prose-invert (bakgrundsfärgen måste hanteras av användare). Till exempel kommer prose dark:prose-invert att använda inverterade färger i mörkt läge.

Din alldeles egna stil

Stilar för element som inte finns inom prose kommer att förbli desamma. Ingen stilåterställning precis som UnoCSS.

Ångra med not-verktyg

Tillämpa not-prose på elementen för att ångra de typografiska stilarna. Till exempel kommer <table class="not-prose"> att hoppa över stilarna från denna preset för table-elementet (OBS: not-verktyget kan endast användas i klass eftersom det endast används i CSS selektor & inte skannas av UnoCSS).

Kompatibilitetsalternativ

Denna preset använder vissa pseudo-klasser som inte är brett supportade, men du kan inaktivera dem. (#2064)

• Om du aktiverar noColonNot eller noColonWhere, kommer not-prose att vara otillgänglig.
• Om du aktiverar noColonIs, kommer attributify-läge att ha ett felaktigt beteende.

Verktyg

Regel	Stilar av denna regel
prose	Se på GitHub.

Färger

Regler (färg)
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

Alternativ

Denna preset har selectorName och cssExtend-konfigurationer för användare som vill åsidosätta eller utöka.

TIP

CSS-deklarationerna som skickas till cssExtend kommer att

• åsidosätta de inbyggda stilarna om värdena är motstridiga, annars
• slås samman djupt med inbyggda stilar.

selectorName

• Typ: string
• Standard: prose

Klassnamnet för att använda de typografiska verktygen. För att ångra stilarna till elementen, använd det som not-${selectorName} som som standard är not-prose.

TIP

not-verktyget är endast tillgängligt i klass.

cssExtend

• Typ: Record<string, CSSObject>
• Standard: undefined

Utöka eller åsidosätt CSS-selektorer med CSS-deklarationsblock.

compatibility

• Typ: TypographyCompatibilityOptions
• Standard: undefined

Se Kompatibilitetsalternativ.

WARNING

Observera att det kommer att påverka vissa funktioner.

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

Exempel

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

export default defineConfig({
  presets: [
    presetAttributify(), // krävs om du använder attributify-läge
    presetWind3(), // krävs
    presetTypography({
      selectorName: 'markdown', // använd nu som `markdown markdown-gray`, `not-markdown`
      // cssExtend är ett objekt med CSS-selektor som nyckel och
      // CSS-deklarationsblock som värde som att skriva normal CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Erkännanden

• Tailwind CSS Typography
• Windi CSS Typography