إعداد Typography المسبق

يوفر مجموعة من فئات prose التي يمكنك استخدامها لإضافة افتراضيات طباعية إلى HTML العادي.

الكود المصدري

التثبيت

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(), // required when using attributify mode
    presetWind3(), // 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>

WARNING

ملاحظة: not-prose يمكن استخدامها فقط كفئة، وليس كسمة.

المميزات

أي حجم خط

طبق أي حجم خط للجسم تريده وسيقوم prose بتوسيع الأنماط لعناصر HTML المقابلة. على سبيل المثال، prose text-lg له حجم خط الجسم 1.125rem وسيتم توسيع h1 مع هذا الحجم 2.25 مرة. راجع جميع عناصر HTML المدعومة.

أي لون

طبق أي لون مع prose-${colorName} بواسطة UnoCSS (على سبيل المثال prose-coolgray، prose-sky) نظراً لأن prose لا يحتوي على أي لون افتراضياً. راجع جميع الألوان المتاحة. على سبيل المثال، 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 للمستخدمين الذين يحبون التجاوز أو التوسيع.

TIP

إعلانات CSS الممررة إلى cssExtend سوف

• تتجاوز الأنماط المدمجة إذا كانت القيم متعارضة، وإلا
• تدمج بعمق مع الأنماط المدمجة.

selectorName

• النوع: string
• افتراضي: prose

اسم الفئة لاستخدام الأدوات الطباعية. للتراجع عن الأنماط للعناصر، استخدمها مثل not-${selectorName} والتي هي افتراضياً not-prose.

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(), // required if using attributify mode
    presetWind3(), // 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