排版預設

提供一組 prose 類別，您可以使用它們將排版預設值添加到 vanilla HTML。

原始碼

安裝

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.js

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetUno
} from 'unocss'

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

類別

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

屬性

<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，attributify 模式將會出現錯誤的行為。

工具

規則	此規則的樣式
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

請參閱 相容性選項。

警告

請注意，它會影響某些功能。

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

範例

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

致謝

• Tailwind CSS 排版
• Windi CSS 排版