版式预设

🌐 Typography preset

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

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

安装

🌐 Installation

pnpmyarnnpmbun

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

TIP

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

import presetTypography from '@unocss/preset-typography'
// or
import { presetTypography } from 'unocss'

用法

🌐 Usage

uno.config.ts

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3 // or presetWind4
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(), // required!
    presetAttributify(), // required when using attributify mode
    presetTypography(),
  ],
})

ClassesAttributes

html

<article class="text-base prose dark:prose-invert xl:text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>

html

<article text-base prose="~ dark:invert" xl="text-xl">
  {{ markdown }}
  <p class="not-prose">Some text</p>
</article>

WARNING

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

强调

🌐 Highlights

任意尺寸

🌐 Any size

使用内置的尺寸变体应用不同的排版大小：prose-sm、prose-base、prose-lg、prose-xl 和 prose-2xl。默认的 prose 类使用基础尺寸，你可以使用特定的尺寸工具进行覆盖。

🌐 Apply different typography sizes with built-in size variants: prose-sm, prose-base, prose-lg, prose-xl, and prose-2xl. The default prose class uses the base size, and you can override it with specific size utilities.

html

<!-- Different sizes -->
<article class="prose prose-sm">Small typography</article>
<article class="prose prose-base">Base typography (default)</article>
<article class="prose prose-lg">Large typography</article>
<article class="prose prose-xl">Extra large typography</article>
<article class="prose prose-2xl">2X large typography</article>

你还可以将尺寸工具与响应式变体结合使用：

🌐 You can also combine size utilities with responsive variants:

html

<!-- Responsive typography sizes -->
<article class="prose prose-sm md:prose-base lg:prose-lg xl:prose-xl">
  Responsive typography that scales with screen size
</article>

<!-- Use with other utilities -->
<article class="prose prose-lg prose-gray dark:prose-invert">Large typography with color and dark mode</article>

任何颜色

🌐 Any color

使用 presetWind3/4 提供的 prose-${colorName} 工具应用任何颜色。它们的颜色来自主题的 colors 键，建议这些颜色有从 50 到 950 的范围以便正确分级。因此，presetWind3/4 是 必需的

🌐 Apply any color with prose-${colorName} utilities provided by presetWind3/4. Their colors come from the theme's colors key, and it's recommended that these colors have a range from 50 to 950 for proper gradation. Therefore, presetWind3/4 is required

prose 的默认颜色是 prose-gray。散文颜色工具将应用于各种排版元素，如标题、链接、引用块和代码块。

🌐 And the default color for prose is prose-gray. The prose color utilities will apply to various typographic elements such as headings, links, blockquotes, and code blocks.

html

<!-- Different color themes -->
<article class="prose prose-gray">Gray themed typography</article>
<article class="prose prose-blue">Blue themed typography</article>
<article class="prose prose-green">Green themed typography</article>
<article class="prose prose-purple">Purple themed typography</article>

Natural Colors	Accent Colors
These have different color scheduling ranges, affecting global typography usage.	These only change the link color and do not affect other colors.
`prose-slate`	`prose-rose`
`prose-slate`	`prose-red`
`prose-gray`	`prose-orange`
`prose-zinc`	`prose-amber`
`prose-neutral`	`prose-yellow`
`prose-stone`	`prose-lime`
	`prose-green`
	`prose-emerald`
	`prose-teal`
	`prose-cyan`
	`prose-sky`
	`prose-blue`
	`prose-indigo`
	`prose-violet`
	`prose-purple`
	`prose-fuchsia`
	`prose-pink`
	`prose-rose`

你可以将颜色与尺寸和响应式变体结合使用：

🌐 You can combine colors with sizes and responsive variants:

html

<!-- Responsive color changes -->
<article class="prose prose-gray md:prose-blue lg:prose-green">
  Typography that changes color at different breakpoints
</article>

<!-- Color with size and dark mode -->
<article class="prose prose-lg prose-slate dark:prose-invert">
  Large typography with slate color and dark mode support
</article>

具有单一工具的夜间模式

🌐 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 将无法使用。
如果你启用 noColonIs，属性化模式将会出现错误行为。

选项

🌐 Options

此预设提供了全面的配置选项，用于自定义排版样式、颜色、大小和行为。

🌐 This preset provides comprehensive configuration options for customizing typography styles, colors, sizes, and behavior.

TIP

传递给 cssExtend 的 CSS 声明将会

覆盖内置样式，如果数值冲突，否则
与内置样式密切结合。

selectorName

类型: string
默认: 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.

TIP

not 工具只能在类中使用。

cssExtend

类型: Record<string, CSSObject> | ((theme: T) => Record<string, CSSObject>)
默认: undefined

使用 CSS 声明块扩展或覆盖 CSS 选择器。可以是静态对象，也可以是接收主题并返回 CSS 选择器的函数。

🌐 Extend or override CSS selectors with CSS declaration block. Can be either a static object or a function that receives the theme and returns CSS selectors.

important

类型: boolean | string
默认: false

控制是否应将散文工具标记为 !important。当设置为 true 时，所有散文样式都将添加 !important。当设置为字符串时，它将用作 CSS 选择器范围。

🌐 Control whether prose utilities should be marked with !important. When set to true, all prose styles will have !important added. When set to a string, it will be used as a CSS selector scope.

colorScheme

类型: TypographyColorScheme
默认: 见下文

排版元素的配色方案。每个键表示一个排版元素，值的格式为 [light, dark] => [color, invert-color]。

🌐 Color scheme for typography elements. Each key represents a typographic element with values in the format [light, dark] => [color, invert-color].

默认配色方案：

json

{
  "body": [700, 300],
  "headings": [900, "white"],
  "lead": [600, 400],
  "links": [900, "white"],
  "bold": [900, "white"],
  "counters": [500, 400],
  "bullets": [300, 600],
  "hr": [200, 700],
  "quotes": [900, 100],
  "quote-borders": [200, 700],
  "captions": [500, 400],
  "kbd": [900, "white"],
  "kbd-shadows": [900, "white"],
  "code": [900, "white"],
  "pre-code": [200, 300],
  "pre-bg": [800, "rgb(0 0 0 / 50%)"],
  "th-borders": [300, 600],
  "td-borders": [200, 700]
}

sizeScheme

类型: TypographySizeScheme
默认: undefined

排版元素的尺寸方案。允许你为不同尺寸的各种排版元素自定义 CSS 样式。类似于 cssExtend，但对不同的文本尺寸应用更细化的覆盖。

🌐 Size scheme for typography elements. Allows you to customize the CSS styles of various typographic elements for different sizes. Similar to cssExtend, but applies granular overlays to different text sizes.

示例:

json

{
  "sm": {
    "h1": { "font-size": "1.5rem" },
    "p": { "font-size": "0.875rem" }
  },
  "base": {
    "h1": { "font-size": "2rem" },
    "p": { "font-size": "1rem" }
  },
  "lg": {
    "h1": { "font-size": "2.5rem" },
    "p": { "font-size": "1.125rem" }
  }
}

cssVarPrefix

类型: string
默认: --un-prose

为生成的 CSS 自定义属性（CSS 变量）设置前缀。这允许你自定义预设内部使用的 CSS 变量的命名。

🌐 Prefix for generated CSS custom properties (CSS variables). This allows you to customize the naming of CSS variables used internally by the preset.

compatibility

类型: TypographyCompatibilityOptions
默认: undefined

请参阅兼容性选项。

WARNING

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

🌐 See Compatibility options.

WARNING

Notice that it will affect some features.

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

示例

🌐 Example

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

致谢

🌐 Acknowledgement

版式预设 ​

安装 ​

用法 ​

强调 ​

任意尺寸 ​

任何颜色 ​

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

你自己的样式 ​

使用 not 工具撤销 ​

兼容性选项 ​

选项 ​

selectorName ​

cssExtend ​

important ​

colorScheme ​

sizeScheme ​

cssVarPrefix ​

compatibility ​

示例 ​

致谢 ​

版式预设

安装

用法

强调

任意尺寸

任何颜色

具有单一工具的夜间模式

你自己的样式

使用 `not` 工具撤销

兼容性选项

选项

selectorName

cssExtend

important

colorScheme

sizeScheme

cssVarPrefix

compatibility

示例

致谢