Typography preset

바닐라 HTML에 타이포그래피 기본값을 추가하는 데 사용할 수 있는 prose 클래스 세트를 제공합니다.

소스 코드

설치

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

이 preset은 unocss 패키지에 포함되어 있으며, 거기서도 가져올 수 있습니다:

import { presetTypography } from 'unocss'

사용법

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

export default defineConfig({
  presets: [
    presetAttributify(), // attributify 모드 사용 시 필요
    presetWind3(), // 필요
    presetTypography(),
  ],
})

클래스

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

속성

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

WARNING

참고: not-prose는 클래스로만 사용할 수 있으며, 속성으로는 사용할 수 없습니다.

하이라이트

모든 폰트 크기

원하는 본문 폰트 크기를 적용하면 prose가 해당 HTML 요소의 스타일을 조정합니다. 예를 들어, prose text-lg는 본문 폰트 크기가 1.125rem이고 h1은 해당 크기의 2.25배로 조정됩니다. 지원되는 모든 HTML 요소를 참조하세요.

모든 색상

UnoCSS의 prose-${colorName}으로 모든 색상을 적용할 수 있습니다 (예: 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 요소에 대해 이 preset의 스타일을 건너뜁니다 (참고: not 유틸리티는 CSS 선택자에서만 사용되며 UnoCSS에서 스캔되지 않기 때문에 클래스에서만 사용 가능합니다).

호환성 옵션

이 preset은 널리 지원되지 않는 일부 의사 클래스를 사용하지만, 비활성화할 수 있습니다. (#2064)

• noColonNot 또는 noColonWhere를 활성화하면 not-prose를 사용할 수 없습니다.
• noColonIs를 활성화하면 attributify 모드가 잘못된 동작을 합니다.

유틸리티

규칙	이 규칙의 스타일
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

옵션

이 preset에는 재정의하거나 확장하고 싶은 사용자를 위한 selectorName과 cssExtend 설정이 있습니다.

TIP

cssExtend에 전달된 CSS 선언은

• 값이 충돌하는 경우 내장 스타일을 재정의하고, 그렇지 않으면
• 내장 스타일과 깊이 병합됩니다.

selectorName

• 타입: string
• 기본값: prose

타이포그래피 유틸리티에 사용할 클래스 이름. 요소의 스타일을 되돌리려면 기본적으로 not-prose인 not-${selectorName}처럼 사용하세요.

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(), // attributify 모드 사용 시 필요
    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