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

プレーンな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要素を参照してください。

任意の色

UnoCSSで`prose-${colorName}`（例:`prose-coolgray`、`prose-sky`）を使用して任意の色を適用します。`prose`はデフォルトでは色を持ちません。利用可能なすべてのカラーを参照してください。例えば、`prose prose-truegray`は対応するHTML要素に対応する色を使用します。

単一のユーティリティによるダークモード

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

独自のスタイル

`prose`内にない要素のスタイルは同じままです。UnoCSSのようにスタイルのリセットは行いません。

`not`ユーティリティによる元に戻す

要素に`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-prose`である`not-${selectorName}`のように使用します。

ヒント

`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 Typography
• Windi CSS Typography