Пресет типографики

Предоставляет набор классов prose, которые можно использовать для добавления типографских значений по умолчанию к обычному HTML.

Исходный код

Установка

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

Этот пресет включен в пакет unocss, вы также можете импортировать его оттуда:

import { presetTypography } from 'unocss'

Использование

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

export default defineConfig({
  presets: [
    presetAttributify(), // требуется при использовании режима атрибутивности
    presetWind3(), // требуется
    presetTypography(),
  ],
})

Классы

<article class="text-base prose prose-truegray xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Некоторый текст</p>
</article>

Атрибуты

<article text-base prose prose-truegray xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Некоторый текст</p>
</article>

WARNING

Обратите внимание: not-prose можно использовать только как класс, а не как атрибут.

Особенности

Любой размер шрифта

Применяйте любой размер шрифта для тела, и prose будет масштабировать стили для соответствующих HTML-элементов. Например, prose text-lg имеет размер шрифта тела 1.125rem, а h1 будет масштабироваться в 2.25 раза относительно этого размера. Смотрите все поддерживаемые HTML-элементы.

Любой цвет

Применяйте любой цвет с помощью prose-${colorName} от UnoCSS (например, prose-coolgray, prose-sky), так как prose не имеет цвета по умолчанию. Смотрите все доступные цвета. Например, prose prose-truegray будет использовать соответствующие цвета для соответствующих HTML-элементов.

Темный режим одной утилитой

Применяйте типографский темный режим с помощью prose-invert (цвет фона должен обрабатываться пользователем). Например, prose dark:prose-invert будет использовать инвертированные цвета в темном режиме.

Ваш собственный стиль

Стили элементов вне prose останутся прежними. Без сброса стилей, как в UnoCSS.

Отмена с помощью утилиты not

Применяйте not-prose к элементам, чтобы отменить типографские стили. Например, <table class="not-prose"> пропустит стили этого пресета для элемента table (ПРИМЕЧАНИЕ: утилита not работает только в классе, так как используется только в CSS-селекторе и не сканируется UnoCSS).

Параметры совместимости

Этот пресет использует некоторые псевдоклассы, которые не имеют широкой поддержки, но вы можете их отключить. (#2064)

• Если вы включите noColonNot или noColonWhere, not-prose будет недоступен.
• Если вы включите noColonIs, режим атрибутивности будет работать неправильно.

Утилиты

Правило	Стили этого правила
prose	Смотрите на GitHub.

Цвета

Правила (цвет)
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

Параметры

Этот пресет имеет конфигурации selectorName и cssExtend для пользователей, которые хотят переопределить или расширить.

TIP

CSS-декларации, переданные в cssExtend, будут:

• переопределять встроенные стили, если значения конфликтуют, иначе
• глубоко объединяться со встроенными стилями.

selectorName

• Тип: string
• По умолчанию: prose

Имя класса для использования типографских утилит. Чтобы отменить стили для элементов, используйте его как not-${selectorName}, что по умолчанию not-prose.

TIP

Утилита not доступна только в классе.

cssExtend

• Тип: Record<string, CSSObject>
• По умолчанию: undefined

Расширение или переопределение CSS-селекторов блоком CSS-деклараций.

compatibility

• Тип: TypographyCompatibilityOptions
• По умолчанию: undefined

Смотрите Параметры совместимости.

WARNING

Обратите внимание, что это повлияет на некоторые функции.

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

Пример

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

export default defineConfig({
  presets: [
    presetAttributify(), // требуется при использовании режима атрибутивности
    presetWind3(), // требуется
    presetTypography({
      selectorName: 'markdown', // теперь используйте как `markdown markdown-gray`, `not-markdown`
      // cssExtend - это объект с CSS-селектором в качестве ключа и
      // блоком CSS-деклараций в качестве значения, как при написании обычного CSS.
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Благодарности

• Tailwind CSS Typography
• Windi CSS Typography