Typography preset

Cung cấp một tập hợp các lớp prose bạn có thể dùng để thêm các mặc định kiểu chữ vào HTML thuần.

Mã nguồn

Cài đặt

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 này được bao gồm trong gói unocss, bạn cũng có thể import nó từ đó:

import { presetTypography } from 'unocss'

Sử dụng

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

Lưu ý: not-prose chỉ có thể được dùng như một lớp, không phải như một thuộc tính.

Điểm nổi bật

Bất kỳ kích thước font nào

Áp dụng bất kỳ kích thước font nào cho body bạn muốn và prose sẽ tỷ lệ các kiểu cho các phần tử HTML tương ứng. Ví dụ, prose text-lg có kích thước font body 1.125rem và h1 sẽ tỷ lệ với kích thước đó 2.25 lần. Xem tất cả các phần tử HTML được hỗ trợ.

Bất kỳ màu nào

Áp dụng bất kỳ màu nào với prose-${colorName} bởi UnoCSS (v.d. prose-coolgray, prose-sky) vì prose không có màu nào theo mặc định. Xem tất cả màu có sẵn. Ví dụ, prose prose-truegray sẽ dùng các màu tương ứng cho các phần tử HTML tương ứng.

Chế độ tối với một tiện ích duy nhất

Áp dụng chế độ tối kiểu chữ với prose-invert (màu nền cần được xử lý bởi người dùng). Ví dụ, prose dark:prose-invert sẽ dùng các màu đảo ngược trong chế độ tối.

Kiểu của riêng bạn

Kiểu của các phần tử không nằm trong prose sẽ giữ nguyên. Không có đặt lại kiểu giống như UnoCSS.

Hoàn tác với tiện ích not

Áp dụng not-prose cho các phần tử để hoàn tác các kiểu chữ. Cho ví dụ, <table class="not-prose"> sẽ bỏ qua các kiểu bởi preset này cho phần tử table (LƯU Ý: tiện ích not chỉ có thể dùng trong lớp vì nó chỉ được dùng trong CSS selector & không được quét bởi UnoCSS).

Tùy chọn tương thích

Preset này dùng một số lớp giả không được hỗ trợ rộng rãi, nhưng bạn có thể tắt chúng. (#2064)

• Nếu bạn bật noColonNot hoặc noColonWhere, not-prose sẽ không khả dụng.
• Nếu bạn bật noColonIs, chế độ attributify sẽ có hành vi sai.

Tiện ích

Quy tắc	Kiểu bởi quy tắc này
prose	Xem trên GitHub.

Màu sắc

Quy tắc (màu)
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

Tùy chọn

Preset này có cấu hình selectorName và cssExtend cho những người dùng muốn ghi đè hoặc mở rộng.

TIP

Các khai báo CSS được truyền vào cssExtend sẽ

• ghi đè các kiểu tích hợp nếu giá trị xung đột, ngược lại
• được hợp nhất sâu với các kiểu tích hợp.

selectorName

• Kiểu: string
• Mặc định: prose

Tên lớp để dùng các tiện ích kiểu chữ. Để hoàn tác các kiểu cho các phần tử, dùng nó như not-${selectorName} mà theo mặc định là not-prose.

TIP

Tiện ích not chỉ khả dụng trong lớp.

cssExtend

• Kiểu: Record<string, CSSObject>
• Mặc định: undefined

Mở rộng hoặc ghi đè các bộ chọn CSS với khối khai báo CSS.

compatibility

• Kiểu: TypographyCompatibilityOptions
• Mặc định: undefined

Xem Tùy chọn tương thích.

WARNING

Lưu ý rằng nó sẽ ảnh hưởng đến một số tính năng.

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

Ví dụ

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',
        },
      },
    }),
  ],
})

Lời cảm ơn

• Tailwind CSS Typography
• Windi CSS Typography