Typography preset

আপনি vanilla HTML-এ typographic defaults যোগ করতে ব্যবহার করতে পারেন এমন prose classes-এর একটি সেট প্রদান করে।

সোর্স কোড

ইনস্টলেশন

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

এই preset unocss প্যাকেজে অন্তর্ভুক্ত, আপনি সেখান থেকেও import করতে পারেন:

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 শুধুমাত্র class হিসাবে ব্যবহার করা যায়, attribute হিসাবে নয়।

Highlights

যেকোনো font size

আপনি যেকোনো font size body-এর জন্য apply করতে পারেন এবং prose সংশ্লিষ্ট HTML elements-এর জন্য styles scale করবে। উদাহরণস্বরূপ, prose text-lg-এর body font size 1.125rem এবং h1 সেই size-এর 2.25 গুণ scale হবে। সমস্ত সমর্থিত HTML elements দেখুন।

যেকোনো color

UnoCSS-এর সাথে prose-${colorName} দিয়ে যেকোনো color apply করুন (যেমন prose-coolgray, prose-sky) কারণ prose-এর ডিফল্টভাবে কোনো color নেই। সমস্ত উপলব্ধ colors দেখুন। উদাহরণস্বরূপ, prose prose-truegray সংশ্লিষ্ট HTML elements-এর জন্য সংশ্লিষ্ট colors ব্যবহার করবে।

একটি utility-এর সাথে Dark mode

prose-invert দিয়ে typographic dark mode apply করুন (background color users-কে handle করতে হবে)। উদাহরণস্বরূপ, prose dark:prose-invert dark mode-এ inverted colors ব্যবহার করবে।

আপনার নিজের স্টাইল

prose-এর মধ্যে না থাকা elements-এর styles একই থাকবে। UnoCSS-এর মতোই কোনো style resetting নেই।

not utility-এর সাথে Undo

Typographic styles undo করতে elements-এ not-prose apply করুন। উদাহরণস্বরূপ, <table class="not-prose"> table element-এর জন্য এই preset-এর styles skip করবে (নোট: not utility শুধুমাত্র class-এ ব্যবহারযোগ্য কারণ এটি শুধুমাত্র CSS selector-এ ব্যবহৃত হয় & UnoCSS দ্বারা scan করা হয় না)।

Compatibility options

এই preset কিছু pseudo-classes ব্যবহার করে যা widely supported নয়, কিন্তু আপনি সেগুলি disable করতে পারেন। (#2064)

• আপনি noColonNot বা noColonWhere সক্ষম করলে, prose-prose unavailable হবে।
• আপনি noColonIs সক্ষম করলে, attributify mode-এর ভুল আচরণ হবে।

Utilities

Rule	Styles by this rule
prose	GitHub-এ দেখুন।

Colors

Rules (color)
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

অপশন

এই preset-এ selectorName এবং cssExtend configurations আছে যারা override বা extend করতে চান তাদের জন্য।

TIP

cssExtend-এ পাস করা CSS declarations

• override করবে built-in styles যদি values conflicting হয়, অন্যথায়
• deeply merge হবে built-in styles-এর সাথে।

selectorName

• Type: string
• Default: prose

Typographic utilities ব্যবহার করার জন্য class name। Styles undo করতে, এটি not-${selectorName} হিসাবে ব্যবহার করুন যা ডিফল্টভাবে not-prose।

TIP

not utility শুধুমাত্র class-এ উপলব্ধ।

cssExtend

• Type: Record<string, CSSObject>
• Default: undefined

CSS declaration block দিয়ে CSS selectors extend বা override করুন।

compatibility

• Type: TypographyCompatibilityOptions
• Default: undefined

Compatibility options দেখুন।

WARNING

নোটিশ যে এটি কিছু features প্রভাবিত করবে।

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