Text Effects

Marker Highlight

사람이 직접 그은 마커 획처럼 텍스트를 밑줄 또는 형광펜으로 강조합니다.

Preview

text emphasis

Marker Highlight

underline or mark important words

The Marker Highlighter makes important text stand out effortlessly.

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/highlighter.json

Code

typescript
Copied
1import { Highlighter } from "@/components/highlighter"23export default function Example() {4  return (5    <Highlighter color="#fde68a" padding={6}>6      Highlighter7    </Highlighter>8  )9}

Props

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

action

Type
AnnotationAction
Default
"highlight"
Description
Annotation style.

color

Type
string
Default
"#ffd1dc"
Description
Annotation color.

strokeWidth

Type
number
Default
1.5
Description
Stroke width.

animationDuration

Type
number
Default
600
Description
Draw animation duration.

iterations

Type
number
Default
2
Description
Number of rough-notation strokes.

padding

Type
number
Default
2
Description
Annotation padding around the text.

multiline

Type
boolean
Default
true
Description
Whether to annotate wrapped lines.

isView

Type
boolean
Default
false
Description
Whether to start when in view.

repeat

Type
boolean
Default
false
Description
Whether to replay the draw animation.

repeatDelay

Type
number
Default
1800
Description
Delay between repeated draw animations.

Reference

Reference Marker Highlight