タイポグラフィプリセット

バニラ HTML にタイポグラフィのデフォルトを追加するための一連のプローズクラスを提供します。

ソースコード

インストール

::: code-group

pnpm add -D @unocss/preset-typography

yarn add -D @unocss/preset-typography

npm install -D @unocss/preset-typography

bun add -D @unocss/preset-typography

:::

::: tip このプリセットは unocss パッケージに含まれており、そこからインポートすることもできます：

import presetTypography from '@unocss/preset-typography'
// または
import { presetTypography } from 'unocss'

:::

使用法

import {
  defineConfig,
  presetAttributify,
  presetTypography,
  presetWind3 // または presetWind4
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(), // 必須！
    presetAttributify(), // attributify モードを使用する場合は必須
    presetTypography(),
  ],
})

::: code-group

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

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

:::

::: warning 注意: not-prose はクラスとしてのみ使用でき、属性としては使用できません。 :::

ハイライト

任意のサイズ

組み込みのサイズバリアントを使用して、異なるタイポグラフィサイズを適用します：prose-sm、prose-base、prose-lg、prose-xl、および prose-2xl。デフォルトの prose クラスはベースサイズを使用し、特定のサイズユーティリティで上書きできます。

<!-- 異なるサイズ -->
<article class="prose prose-sm">小さなタイポグラフィ</article>
<article class="prose prose-base">ベースタイポグラフィ（デフォルト）</article>
<article class="prose prose-lg">大きなタイポグラフィ</article>
<article class="prose prose-xl">非常に大きなタイポグラフィ</article>
<article class="prose prose-2xl">2倍大きなタイポグラフィ</article>

サイズユーティリティをレスポンシブバリアントと組み合わせることもできます：

<!-- レスポンシブタイポグラフィサイズ -->
<article class="prose prose-sm md:prose-base lg:prose-lg xl:prose-xl">
  画面サイズに応じてスケールするレスポンシブタイポグラフィ
</article>

<!-- 他のユーティリティと一緒に使用 -->
<article class="prose prose-lg prose-gray dark:prose-invert">色とダークモードを備えた大きなタイポグラフィ</article>

任意の色

presetWind3/4 によって提供される prose-${colorName} ユーティリティを使用して任意の色を適用します。これらの色はテーマの colors キーから取得され、適切なグラデーションのために 50 から 950 までの範囲を持つことが推奨されます。したがって、presetWind3/4 は必須です。

prose のデフォルトの色は prose-gray です。プローズの色ユーティリティは、見出し、リンク、引用、コードブロックなどのさまざまなタイポグラフィ要素に適用されます。

<!-- 異なるカラーテーマ -->
<article class="prose prose-gray">グレーテーマのタイポグラフィ</article>
<article class="prose prose-blue">ブルーテーマのタイポグラフィ</article>
<article class="prose prose-green">グリーンテーマのタイポグラフィ</article>
<article class="prose prose-purple">パープルテーマのタイポグラフィ</article>

色をサイズやレスポンシブバリアントと組み合わせることができます：

<!-- レスポンシブな色の変更 -->
<article class="prose prose-gray md:prose-blue lg:prose-green">
  異なるブレークポイントで色が変わるタイポグラフィ
</article>

<!-- サイズとダークモードを備えた色 -->
<article class="prose prose-lg prose-slate dark:prose-invert">
  スレートカラーとダークモードサポートを備えた大きなタイポグラフィ
</article>

単一のユーティリティでダークモード

prose-invert を使用してタイポグラフィのダークモードを適用します（背景色はユーザーが処理する必要があります）。例えば、prose dark:prose-invert はダークモードで反転した色を使用します。

あなた自身のスタイル

prose に含まれない要素のスタイルはそのままです。UnoCSS のようにスタイルのリセットはありません。

not ユーティリティで元に戻す

not-prose を要素に適用してタイポグラフィスタイルを元に戻します。例えば、<table className="not-prose"> はこのプリセットによる table 要素のスタイルをスキップします （注意: not ユーティリティは CSS セレクタでのみ使用可能で、UnoCSS によってスキャンされません）。

互換性オプション

このプリセットは広くサポートされていない疑似クラスを使用していますが、無効にすることができます。(#2064)

• noColonNot または noColonWhere を有効にすると、not-prose は使用できなくなります。
• noColonIs を有効にすると、attributify モードが誤動作します。

オプション

このプリセットは、タイポグラフィスタイル、色、サイズ、動作をカスタマイズするための包括的な設定オプションを提供します。

:::tip cssExtend に渡された CSS 宣言は

• 値が競合する場合、組み込みスタイルを上書きし、そうでない場合は
• 組み込みスタイルと深くマージされます。 :::

selectorName

• タイプ: string
• デフォルト: prose

タイポグラフィユーティリティを使用するためのクラス名。要素にスタイルを元に戻すには、デフォルトで not-prose である not-${selectorName} を使用します。

:::tip not ユーティリティはクラスでのみ使用可能です。 :::

cssExtend

• タイプ: Record<string,> | ((theme: T) => Record<string,>)
• デフォルト: undefined

CSS セレクタを CSS 宣言ブロックで拡張または上書きします。静的なオブジェクトまたはテーマを受け取り CSS セレクタを返す関数のいずれかです。

important

• タイプ: boolean | string
• デフォルト: false

プローズユーティリティに !important を付けるかどうかを制御します。true に設定すると、すべてのプローズスタイルに !important が追加されます。文字列に設定すると、CSS セレクタスコープとして使用されます。

colorScheme

• タイプ: TypographyColorScheme
• デフォルト: 以下を参照

タイポグラフィ要素のカラースキーム。各キーはタイポグラフィ要素を表し、値は [light, dark] => [color, invert-color] の形式です。

デフォルトのカラースキーム:

{
  "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 に似ていますが、異なるテキストサイズに対して細かいオーバーレイを適用します。

例:

{
  "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 変数の命名をカスタマイズできます。

compatibility

• タイプ: TypographyCompatibilityOptions
• デフォルト: undefined

互換性オプションを参照してください。 :::warning いくつかの機能に影響を与えることに注意してください。 :::

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

例

import { presetTypography } from '@unocss/preset-typography'
import { defineConfig, presetAttributify, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(), // attributify モードを使用する場合は必須
    presetWind3(), // 必須
    presetTypography({
      selectorName: 'markdown', // 現在は `markdown markdown-gray`、`not-markdown` のように使用
      // cssExtend は CSS セレクタをキーとして持ち、
      // CSS 宣言ブロックを値として持つオブジェクトです。
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

謝辞

• Tailwind CSS Typography
• Windi CSS Typography