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.dev/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

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
actionAnnotationAction"highlight"Annotation style.
colorstring"#ffd1dc"Annotation color.
strokeWidthnumber1.5Stroke width.
animationDurationnumber600Draw animation duration.
iterationsnumber2Number of rough-notation strokes.
paddingnumber2Annotation padding around the text.
multilinebooleantrueWhether to annotate wrapped lines.
isViewbooleanfalseWhether to start when in view.
repeatbooleanfalseWhether to replay the draw animation.
repeatDelaynumber1800Delay between repeated draw animations.

Reference

Reference Marker Highlight