UnoCSS 中文网

Appearance

排版预设 ​

提供了一组文章类，你可以用它们为原生 HTML 添加排版默认样式。

源代码

安装 ​

bash
pnpm add -D @unocss/preset-typography
bash
yarn add -D @unocss/preset-typography
bash
npm install -D @unocss/preset-typography
bash
bun add -D @unocss/preset-typography

提示

此预设包含在 unocss 包中，你也可以从该包中导入它：

ts
import { presetTypography } from 'unocss'

Usage ​

uno.config.js
js
import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3
} from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // required when using attributify mode
    presetWind3(), // required
    presetTypography(),
  ],
})
html
<article class="text-base prose prose-truegray xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>
html
<article text-base prose prose-truegray xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>

警告

注意：not-prose 只能作为类名使用，不能作为属性使用。

亮点 ​

任意字体大小 ​

你可以为正文应用任意喜欢的字体大小，prose 类会根据该大小为相应的 HTML 元素缩放样式。例如，prose text-lg 的正文字体大小为 1.125rem，h1 标签的字体大小将是该大小的 2.25 倍。请参阅 所有支持的 HTML 元素。

任意颜色 ​

由于 prose 默认没有任何颜色，你可以使用 UnoCSS 的 prose-${colorName} 来应用任意颜色（例如 prose-coolgray、prose-sky）。请参阅 所有可用颜色。例如，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 配置，供希望覆盖或扩展预设的用户使用。

提示

传递给 cssExtend 的 CSS 声明将：

  • 如果值存在冲突，则 覆盖 内置样式；否则
  • 与内置样式进行深度 合并。

selectorName ​

  • 类型: string
  • 默认值: prose

用于使用排版工具类的类名。若要撤销元素上的样式，请使用 not-${selectorName}，默认情况下为 not-prose。

提示

not 工具仅支持作为类名使用。

cssExtend ​

  • 类型: Record<string, CSSObject>
  • 默认值: undefined

使用 CSS 声明块扩展或覆盖 CSS 选择器。

compatibility ​

  • 类型: TypographyCompatibilityOptions
  • 默认值: undefined

请参阅 兼容性选项。

警告

请注意，这将影响某些功能。

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

Example ​

uno.config.ts
ts
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',
        },
      },
    }),
  ],
})

致谢 ​