Typography preset

バニラHTMLにタイポグラフィのデフォルトを追加するために使用できる一連のproseクラスを提供します。

ソースコード

インストール

pnpm

pnpm add -D @unocss/preset-typography

yarn

yarn add -D @unocss/preset-typography

npm

npm install -D @unocss/preset-typography

bun

bun add -D @unocss/preset-typography

TIP

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

import { presetTypography } from 'unocss'

使用方法

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

export default defineConfig({
  presets: [
    presetAttributify(), // 属性モードを使用する場合は必須
    presetWind3(), // 必須
    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>

WARNING

注意：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を有効にすると、属性モードの動作が正しくなくなります。

ユーティリティ

ルール	このルールのスタイル
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の設定があります。

TIP

cssExtendに渡されたCSS宣言は

• 値が競合する場合は組み込みのスタイルをオーバーライドし、それ以外の場合は
• 組み込みのスタイルと深くマージされます。

selectorName

• 型: string
• デフォルト: prose

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

TIP

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

cssExtend

• 型: Record<string, CSSObject>
• デフォルト: undefined

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(), // 属性モードを使用する場合は必須
    presetWind3(), // 必須
    presetTypography({
      selectorName: 'markdown', // これで`markdown markdown-gray`、`not-markdown`のように使用
      // cssExtendはCSSセレクターをキーとし、
      // 通常のCSSを書くようにCSS宣言ブロックを値とするオブジェクトです。
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

謝辞

• Tailwind CSS Typography
• Windi CSS Typography