Typography prednastavitev

Zagotavlja niz razredov za besedilo, ki jih lahko uporabite za dodajanje tipografskih privzetih vrednosti navadnemu HTML.

Izvorna koda

Namestitev

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

Ta prednastavitev je vključena v paket unocss, lahko jo tudi uvozite od tam:

import { presetTypography } from 'unocss'

Uporaba

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

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

Classes

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

Attributes

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

WARNING

Opomba: not-prose se lahko uporablja le kot razred, ne kot atribut.

Poudarki

Poljubna velikost pisave

Uporabite poljubno velikost pisave za telo, ki vam je všeč, in prose bo prilagodil sloge za ustrezne HTML elemente. Na primer, prose text-lg ima velikost pisave telesa 1.125rem in h1 se bo povečal s to velikostjo 2,25-krat. Glejte vse podprte HTML elemente.

Poljubna barva

Uporabite poljubno barvo z prose-${colorName} z UnoCSS (npr. prose-coolgray, prose-sky), saj prose privzeto nima nobene barve. Glejte vse razpoložljive barve. Na primer, prose prose-truegray bo uporabil ustrezne barve za ustrezne HTML elemente.

Temni način z enim pripomočkom

Uporabite tipografski temni način z prose-invert (barvo ozadja morajo uporabniki obravnavati sami). Na primer, prose dark:prose-invert bo uporabil obrnjene barve v temnem načinu.

Vaš zelo lasten slog

Slogi elementov, ki niso znotraj prose, bodo ostali enaki. Brez ponastavljanja slogov, tako kot UnoCSS.

Razveljavitev z not pripomočkom

Uporabite not-prose za elemente za razveljavitev tipografskih slogov. Na primer, <table class="not-prose"> bo preskočil sloge te prednastavitve za element table (OPOMBA: not pripomoček je uporaben le v razredu, saj se uporablja le v CSS selektorju in ga UnoCSS ne skenira).

Možnosti združljivosti

Ta prednastavitev uporablja nekaj psevdo-razredov, ki niso široko podprti, vendar jih lahko onemogočite. (#2064)

• Če omogočite noColonNot ali noColonWhere, bo not-prose postal nedostopen.
• Če omogočite noColonIs, bo attributify način imel napačno vedenje.

Pripomočki

Rule	Styles by this rule
prose	Glej na GitHub.

Barve

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

Ta prednastavitev ima konfiguraciji selectorName in cssExtend za uporabnike, ki radi prepišejo ali razširijo.

TIP

CSS deklaracije, posredovane cssExtend, bodo

• prepisaile vgrajene sloge, če so vrednosti v nasprotju, drugače
• združene globoko z vgrajenimi slogi.

selectorName

• Tip: string
• Privzeto: prose

Ime razreda za uporabo tipografskih pripomočkov. Za razveljavitev slogov za elemente ga uporabite kot not-${selectorName}, kar je privzeto not-prose.

TIP

not pripomoček je na voljo le v razredu.

cssExtend

• Tip: Record<string, CSSObject>
• Privzeto: undefined

Razširi ali prepiši CSS selektorje z CSS deklaracijskim blokom.

compatibility

• Tip: TypographyCompatibilityOptions
• Privzeto: undefined

Glej Možnosti združljivosti.

WARNING

Upoštevajte, da bo to vplivalo na nekatere funkcije.

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

Primer

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 is an object with CSS selector as key and
      // CSS declaration block as value like writing normal CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Zahvale

• Tailwind CSS Typography
• Windi CSS Typography