排版预设

提供一组可用于为原始 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