排版預設

提供一組可用於為原始 HTML 添加排版默認值的文本類。

源代碼

安裝

pnpm

pnpm add -D @unocss/preset-typography

yarn

yarn add -D @unocss/preset-typography

npm

npm install -D @unocss/preset-typography

TIP

這個預設已包含在 unocss 包中，你也可以從那裡導入：

import { presetTypography } from 'unocss'

使用

// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetUno
} from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // 使用屬性模式時需要
    presetUno(), // 必需
    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 元素。

任意顏色

使用 UnoCSS 的 prose-${顏色名} 應用任何顏色（例如 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

傳遞給 cssExtend 的 CSS 聲明將

• 如果值衝突，則覆蓋內置樣式
• 否則與內置樣式深度合併

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
}

示例

// uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'

export default defineConfig({
  presets: [
    presetAttributify(), // 使用屬性模式時需要
    presetUno(), // 必需
    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