排版预设

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

Source Code(源代码)

安装

pnpm

pnpm add -D @unocss/preset-typography

yarn

yarn add -D @unocss/preset-typography

npm

npm install -D @unocss/preset-typography

提示

这个预设包含在 unocss 包中，你也可以从那里导入它:

import { presetTypography } from "unocss";

使用

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

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

Classes

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

Attributes

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

警告

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

Highlights

任何字体大小

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

任何颜色

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

具有单一实用程序的深色模式

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.

你自己的风格

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

Undo with not utility

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

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

• If you enable noColonNot or noColonWhere, not-prose will be unavailable.
• If you enable noColonIs, attributify mode will have a wrong behavior.

Utilities

Rule	Styles by this rule
prose	See on GitHub.

Colors

Rules (color)
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

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

TIP

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

• Type: string
• Default: 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 utility is only available in class.

cssExtend

• Type: Record<string, CSSObject>
• Default: undefined

Extend or override CSS selectors with CSS declaration block.

compatibility

• Type: TypographyCompatibilityOptions
• Default: undefined

See Compatibility options.

WARNING

Notice that it will affect some features.

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

Example

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

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

• Tailwind CSS Typography
• Windi CSS Typography