Typography Preset

Bietet eine Reihe von Prosa-Klassen, die Sie verwenden können, um typografische Standardeinstellungen zu Vanilla HTML hinzuzufügen.

Quellcode

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

Dieses Preset ist im unocss Paket enthalten, Sie können es auch von dort importieren:

import { presetTypography } from 'unocss'

Verwendung

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

export default defineConfig({
  presets: [
    presetAttributify(), // erforderlich bei Verwendung des Attributify-Modus
    presetWind3(), // erforderlich
    presetTypography(),
  ],
})

Klassen

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

Attribute

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

WARNING

Hinweis: not-prose kann nur als Klasse verwendet werden, nicht als Attribut.

Highlights

Beliebige Schriftgröße

Wenden Sie eine beliebige Schriftgröße für den Body an, die Sie mögen, und prose skaliert die Styles für die jeweiligen HTML-Elemente. Zum Beispiel hat prose text-lg die Body-Schriftgröße 1.125rem und h1 skaliert mit dieser Größe 2,25-mal. Siehe alle unterstützten HTML-Elemente.

Beliebige Farbe

Wenden Sie eine beliebige Farbe mit prose-${colorName} von UnoCSS an (z.B. prose-coolgray, prose-sky), da prose standardmäßig keine Farbe hat. Siehe alle verfügbaren Farben. Zum Beispiel verwendet prose prose-truegray die jeweiligen Farben für die jeweiligen HTML-Elemente.

Dark Mode mit einem einzigen Utility

Wenden Sie typografischen Dark Mode mit prose-invert an (Hintergrundfarbe muss von Benutzern behandelt werden). Zum Beispiel verwendet prose dark:prose-invert die invertierten Farben im Dark Mode.

Ihr eigener Stil

Styles von Elementen außerhalb von prose bleiben gleich. Kein Style-Reset, genau wie UnoCSS.

Rückgängig machen mit not Utility

Wenden Sie not-prose auf die Elemente an, um die typografischen Styles rückgängig zu machen. Zum Beispiel überspringt <table class="not-prose"> die Styles dieses Presets für das table Element (HINWEIS: Das not Utility ist nur als Klasse verwendbar, da es nur im CSS-Selektor verwendet wird und nicht von UnoCSS gescannt wird).

Kompatibilitätsoptionen

Dieses Preset verwendet einige Pseudo-Klassen, die nicht weit verbreitet unterstützt werden, aber Sie können sie deaktivieren. (#2064)

• Wenn Sie noColonNot oder noColonWhere aktivieren, wird not-prose nicht verfügbar sein.
• Wenn Sie noColonIs aktivieren, hat der Attributify-Modus ein falsches Verhalten.

Utilities

Regel	Styles durch diese Regel
prose	Siehe auf GitHub.

Farben

Regeln (Farbe)
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

Optionen

Dieses Preset hat selectorName und cssExtend Konfigurationen für Benutzer, die gerne überschreiben oder erweitern möchten.

TIP

Die an cssExtend übergebenen CSS-Deklarationen werden

• die eingebauten Styles überschreiben, wenn die Werte kollidieren, sonst
• tief zusammengeführt mit eingebauten Styles.

selectorName

• Typ: string
• Standard: prose

Der Klassenname, um die typografischen Utilities zu verwenden. Um die Styles für die Elemente rückgängig zu machen, verwenden Sie es wie not-${selectorName}, was standardmäßig not-prose ist.

TIP

Das not Utility ist nur als Klasse verfügbar.

cssExtend

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

Erweitern oder überschreiben Sie CSS-Selektoren mit CSS-Deklarationsblock.

compatibility

• Typ: TypographyCompatibilityOptions
• Standard: undefined

Siehe Kompatibilitätsoptionen.

WARNING

Beachten Sie, dass es einige Funktionen beeinflussen wird.

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

Beispiel

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

export default defineConfig({
  presets: [
    presetAttributify(), // erforderlich, wenn Attributify-Modus verwendet wird
    presetWind3(), // erforderlich
    presetTypography({
      selectorName: 'markdown', // jetzt verwenden wie `markdown markdown-gray`, `not-markdown`
      // cssExtend ist ein Objekt mit CSS-Selektor als Schlüssel und
      // CSS-Deklarationsblock als Wert, wie beim Schreiben von normalem CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Danksagung

• Tailwind CSS Typography
• Windi CSS Typography