UnoCSS 中文网

主题

版式预设 ​

¥Typography preset

提供一组散文类，可用于将排版默认值添加到普通 HTML。

¥Provides a set of prose classes you can use to add typographic defaults to vanilla HTML.

源代码

¥Source Code

安装 ​

¥Installation

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

提示

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

¥This preset is included in the unocss package, you can also import it from there:

ts
import { presetTypography } from 'unocss'

用法 ​

¥Usage

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

export default defineConfig({
  presets: [
    presetAttributify(), // required when using attributify mode
    presetUno(), // 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 只能用作类，不能用作属性。

¥Notice: not-prose can only be used as a class, not as an attribute.

强调 ​

¥Highlights

任何字体大小 ​

¥Any font size

为正文应用任何你喜欢的字体大小，prose 将缩放相应 HTML 元素的样式。例如，prose text-lg 的正文字体大小为 1.125rem，h1 将以该大小缩放 2.25 倍。参见 所有受支持的 HTML 元素。

¥Apply any font size for body you like and prose will scale the styles for the respective HTML elements. For instance, prose text-lg has body font size 1.125rem and h1 will scale with that size 2.25 times. See all the supported HTML elements.

任何颜色 ​

¥Any color

通过 UnoCSS 使用 prose-${colorName} 应用任何颜色（例如 prose-coolgray、prose-sky），因为 prose 默认情况下没有任何颜色。参见 所有可用颜色。例如，prose prose-truegray 将为相应的 HTML 元素使用相应的颜色。

¥Apply any color with prose-${colorName} by UnoCSS (e.g. prose-coolgray, prose-sky) since prose does not have any color by default. See all available colors. For instance, prose prose-truegray will use the respective colors for the respective HTML elements.

具有单一工具的夜间模式 ​

¥Dark mode with a single utility

使用 prose-invert 应用印刷夜间模式（背景颜色需要用户处理）。例如，prose dark:prose-invert 将在夜间模式下使用反色。

¥Apply typographic dark mode with prose-invert (background color needs to be handled by users). For instance, prose dark:prose-invert will use the inverted colors in the dark mode.

你自己的样式 ​

¥Your very own style

不在 prose 作用域内的元素样式将保持不变。没有像 UnoCSS 那样重置样式。

¥Styles of elements not within prose will stay the same. No style resetting just like UnoCSS.

使用 not 工具撤消 ​

¥Undo with not utility

将 not-prose 应用于元素以撤消印刷样式。例如，<table class="not-prose"> 将跳过 table 元素的此预设样式（注意：not 工具仅在类中可用，因为它仅在 CSS 选择器中使用且不被 UnoCSS 扫描）。

¥Apply not-prose to the elements to undo the typographic styles. For instance, <table class="not-prose"> will skip the styles by this preset for the table element (NOTE: not utility is only usable in class since it is only used in CSS selector & not scanned by UnoCSS).

兼容性选项 ​

¥Compatibility options

此预设使用一些未得到广泛支持的伪类，但你可以禁用它们。(#2064)

¥This preset uses some pseudo-classes which are not widely supported, but you can disable them. (#2064)

  • 如果启用 noColonNot 或 noColonWhere，not-prose 将不可用。

    ¥If you enable noColonNot or noColonWhere, not-prose will be unavailable.

  • 如果启用 noColonIs，属性化模式将出现错误行为。

    ¥If you enable noColonIs, attributify mode will have a wrong behavior.

实用工具 ​

¥Utilities

规则遵循此规则的样式
prose参见 在 GitHub 上。

颜色 ​

¥Colors

规则（颜色）
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

选项 ​

¥Options

该预设有 selectorName 和 cssExtend 配置，适合喜欢覆盖或扩展的用户。

¥This preset has selectorName and cssExtend configurations for users who like to override or extend.

提示

传递给 cssExtend 的 CSS 声明将

¥The CSS declarations passed to cssExtend will

  • 如果值冲突，则覆盖内置样式，否则

    ¥override the built-in styles if the values are conflicting, else

  • 与内置样式深度融合。

    ¥be merged deeply with built-in styles.

selectorName ​

  • 类型：string

    ¥Type: string

  • 默认：prose

    ¥Default: prose

使用排版工具的类名。要撤消元素的样式，请像 not-${selectorName} 一样使用它，默认情况下是 not-prose。

¥The class name to use the typographic utilities. To undo the styles to the elements, use it like not-${selectorName} which is by default not-prose.

提示

not 工具仅在课堂上可用。

¥not utility is only available in class.

cssExtend ​

  • 类型：Record<string, CSSObject>

    ¥Type: Record<string, CSSObject>

  • 默认：undefined

    ¥Default: undefined

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

¥Extend or override CSS selectors with CSS declaration block.

compatibility ​

  • 类型：TypographyCompatibilityOptions

    ¥Type: TypographyCompatibilityOptions

  • 默认：undefined

    ¥Default: undefined

参见 兼容性选项。

¥See Compatibility options.

警告

请注意，它会影响某些功能。

¥Notice that it will affect some features.

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

示例 ​

¥Example

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

export default defineConfig({
  presets: [
    presetAttributify(), // required if using attributify mode
    presetUno(), // 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',
        },
      },
    }),
  ],
})

致谢 ​

¥Acknowledgement

UnoCSS 中文网 - 粤ICP备13048890号