Skip to main content

Verisimilitude

Chrome Tabs
Clip-path playground
CSS shape + masking for cutouts
Site search

Loading site search…

A Raycast-style command palette
Grouped Popups

Inline references can carry previews without leaving paragraph flow. Open Website, Vercel, GitHub for quick context before committing to a new tab.

Keys
⌘/⌘I⌘K
DeviceFrame · Phone

Loading phone frame…

A remix of Geist's Phone component. Responds to color mode and uses your device's clock and battery level (except on iOS).
DeviceFrame · Browser

Loading browser frame…

Custom mark styles

∙ with CSS corner-shape

The default mark styling is dated. Let's make the shape a bit more realistic with corner-shape.

Then slap a data-hue attribute on it for some classic highligter colors, like yellow or pink or lime or magenta or cyan.

The highlight shape also plays nice with long strings. It's got box-decoration-break: clone applied to make the shape span line breaks. Notice how the nested code inherited a little treatment too? I think that's a nice touch.

Custom overrides

Don't like the default values? Override with classes, like this classic highlighter look.