Typography preset

ให้ชุดของ prose classes ที่คุณสามารถใช้เพื่อเพิ่ม typographic defaults ให้กับ vanilla HTML

Source Code

การติดตั้ง

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(), // จำเป็นเมื่อใช้ attributify mode
    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 สามารถใช้เป็น class เท่านั้น ไม่ใช่ attribute

Highlights

Any font size

ใช้ขนาดฟอนต์ใดๆ สำหรับ body ที่คุณต้องการ และ prose จะปรับขนาด styles สำหรับ HTML elements ที่เกี่ยวข้อง ตัวอย่างเช่น prose text-lg มีขนาดฟอนต์ body 1.125rem และ h1 จะปรับขนาด 2.25 เท่า ดู HTML elements ทั้งหมดที่รองรับ

Any color

ใช้สีใดๆ ด้วย prose-${colorName} โดย UnoCSS (เช่น prose-coolgray, prose-sky) เนื่องจาก prose ไม่มีสีโดยค่าเริ่มต้น ดู สีทั้งหมดที่มี ตัวอย่างเช่น prose prose-truegray จะใช้สีที่เกี่ยวข้องสำหรับ HTML elements ที่เกี่ยวข้อง

Dark mode with a single utility

ใช้ typographic dark mode ด้วย prose-invert (สีพื้นหลังต้องจัดการโดยผู้ใช้) ตัวอย่างเช่น prose dark:prose-invert จะใช้สีกลับด้านใน dark mode

Your very own style

Styles ของ elements ที่ไม่อยู่ใน prose จะยังคงเหมือนเดิม ไม่มีการ reset style เหมือน UnoCSS

Undo with not utility

ใช้ not-prose กับ elements เพื่อยกเลิก typographic styles ตัวอย่างเช่น <table class="not-prose"> จะข้าม styles โดย preset นี้สำหรับ table element (หมายเหตุ: not utility ใช้ได้เฉพาะใน class เนื่องจากใช้เฉพาะใน CSS selector และไม่ถูกสแกนโดย UnoCSS)

Compatibility options

preset นี้ใช้ pseudo-classes บางตัวที่ไม่ได้รับการสนับสนุนอย่างกว้างขวาง แต่คุณสามารถปิดใช้งานได้ (#2064)

• หากคุณเปิดใช้งาน noColonNot หรือ noColonWhere not-prose จะไม่สามารถใช้ได้
• หากคุณเปิดใช้งาน noColonIs attributify mode จะมีพฤติกรรมที่ผิดพลาด

Utilities

Rule	Styles by this rule
prose	See on 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

Options

preset นี้มีการกำหนดค่า selectorName และ cssExtend สำหรับผู้ใช้ที่ต้องการ override หรือ extend

TIP

CSS declarations ที่ส่งไปยัง cssExtend จะ

• override built-in styles หากค่าขัดแย้งกัน หรือ
• ถูก merge แบบ deep กับ built-in styles

selectorName

• Type: string
• Default: prose

Class name ที่จะใช้ typographic utilities เพื่อยกเลิก styles สำหรับ elements ให้ใช้เหมือน not-${selectorName} ซึ่งโดยค่าเริ่มต้นคือ not-prose

TIP

not utility ใช้ได้เฉพาะใน class

cssExtend

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

Extend หรือ override CSS selectors ด้วย CSS declaration block

compatibility

• Type: TypographyCompatibilityOptions
• Default: undefined

ดู Compatibility options

WARNING

โปรดทราบว่าจะส่งผลต่อคุณสมบัติบางอย่าง

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

Example

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

export default defineConfig({
  presets: [
    presetAttributify(), // จำเป็นหากใช้ attributify mode
    presetWind3(), // จำเป็น
    presetTypography({
      selectorName: 'markdown', // ตอนนี้ใช้เหมือน `markdown markdown-gray`, `not-markdown`
      // cssExtend เป็น object ที่มี CSS selector เป็น key และ
      // CSS declaration block เป็น value เหมือนเขียน CSS ปกติ
      cssExtend: {
        'code': {
          color: '#8b5cf6',
        },
        'a:hover': {
          color: '#f43f5e',
        },
        'a:visited': {
          color: '#14b8a6',
        },
      },
    }),
  ],
})

Acknowledgement

• Tailwind CSS Typography
• Windi CSS Typography