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

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/highlighter.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/highlighter.json

bash

Copied

1bunx 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

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
action	AnnotationAction	"highlight"	Annotation style.
color	string	"#ffd1dc"	Annotation color.
strokeWidth	number	1.5	Stroke width.
animationDuration	number	600	Draw animation duration.
iterations	number	2	Number of rough-notation strokes.
padding	number	2	Annotation padding around the text.
multiline	boolean	true	Whether to annotate wrapped lines.
isView	boolean	false	Whether to start when in view.
repeat	boolean	false	Whether to replay the draw animation.
repeatDelay	number	1800	Delay between repeated draw animations.

Reference

Reference Marker Highlight