Typography preset

Poskytuje sadu prose tried, ktoré môžete použiť na pridanie typografických predvolieb do vanilla HTML.

Zdrojový kód

Inštalácia

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

Tento preset je zahrnutý v balíku unocss, môžete ho tiež importovať odtiaľ:

import { presetTypography } from 'unocss'

Použitie

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

export default defineConfig({
  presets: [
    presetAttributify(), // required when using attributify mode
    presetWind3(), // required
    presetTypography(),
  ],
})

Triedy

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

Atribúty

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

WARNING

Upozornenie: not-prose môže byť použitá iba ako trieda, nie ako atribút.

Hlavné vlastnosti

Ľubovoľná veľkosť písma

Aplikujte ľubovoľnú veľkosť písma pre telo, akú chcete, a prose prispôsobí štýly pre príslušné HTML prvky. Napríklad prose text-lg má veľkosť písma tela 1.125rem a h1 sa prispôsobí tejto veľkosti 2,25-krát. Pozrite si všetky podporované HTML prvky.

Ľubovoľná farba

Aplikujte ľubovoľnú farbu s prose-${colorName} podľa UnoCSS (napr. prose-coolgray, prose-sky), keďže prose nemá predvolene žiadnu farbu. Pozrite si všetky dostupné farby. Napríklad prose prose-truegray použije príslušné farby pre príslušné HTML prvky.

Dark mode s jednou utilítou

Aplikujte typografický dark mode s prose-invert (farba pozadia musí byť riešená používateľmi). Napríklad prose dark:prose-invert použije invertované farby v dark mode.

Váš vlastný štýl

Štýly prvkov, ktoré nie sú v rámci prose, zostanú rovnaké. Žiadne resetovanie štýlov, presne ako UnoCSS.

Cofnutie s not utilítou

Aplikujte not-prose na prvky na zrušenie typografických štýlov. Napríklad <table class="not-prose"> preskočí štýly týmto presetom pre prvok table (POZNÁMKA: not utilita je použiteľná iba v triede, keďže je použitá iba v CSS selektore a nie je skenovaná UnoCSS).

Možnosti kompatibility

Tento preset používa niektoré pseudo-triedy, ktoré nie sú široko podporované, ale môžete ich zakázať. (#2064)

• Ak povolíte noColonNot alebo noColonWhere, not-prose bude nedostupná.
• Ak povolíte noColonIs, režim attributify bude mať nesprávne správanie.

Utility

Rule	Štýly týmto pravidlom
prose	Pozrite si na GitHub.

Farby

Rules (color)
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

Možnosti

Tento preset má konfigurácie selectorName a cssExtend pre používateľov, ktorí chcú prepísať alebo rozšíriť.

TIP

CSS deklarácie odovzdané do cssExtend budú

• prepísať vstavané štýly, ak sú hodnoty v konflikte, inak
• budú zlúčené hlboko so vstavanými štýlmi.

selectorName

• Type: string
• Default: prose

Názov triedy na použitie typografických utilít. Na zrušenie štýlov pre prvky použite ako not-${selectorName}, čo je predvolené not-prose.

TIP

not utilita je dostupná iba v triede.

cssExtend

• Type: Record<string, CSSObject>
• Default: undefined

Rozšíriť alebo prepísať CSS selektory s CSS deklaračným blokom.

compatibility

• Type: TypographyCompatibilityOptions
• Default: undefined

Pozrite Možnosti kompatibility.

WARNING

Upozorňujeme, že to ovplyvní niektoré funkcie.

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

Príklad

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

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetWind3(), // required
    presetTypography({
      selectorName: 'markdown', // now use like `markdown markdown-gray`, `not-markdown`
      // cssExtend je objekt s CSS selektorom ako kľúčom a
      // CSS deklaračným blokom ako hodnotou, ako pri písaní bežného CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Poďakovanie

• Tailwind CSS Typography
• Windi CSS Typography