Highlight - Vant 4

Highlight

✨ Make your text shine! Transform ordinary content into visually striking highlights that capture attention and improve readability. Perfect for search results, keywords, and important information! 🎯

💡 Intro

Spotlight your content with style! 🌟 The Highlight component intelligently identifies and emphasizes specified text content, making it perfect for search results, keyword highlighting, and drawing attention to important information. Please upgrade vant to >= v4.8.0 before using this component.

📦 Install

Get started in seconds! 🚀 Register the component globally and start highlighting text content throughout your application.

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Highlight } from'vant'; const app = createApp(); app.use(Highlight);

🎨 Usage

Discover the power of intelligent text highlighting! ✨ From basic keyword emphasis to advanced multi-term highlighting with custom styling.

🎯 Basic Usage

Start with simple keyword highlighting! 🔍 Specify your target keywords and source text to instantly create visual emphasis.

You can specify keywords to be highlighted with keywords and source text with source-string.

exportdefault { setup() { const text = 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.'; const keywords = 'questions'; return { text, keywords, }; }, };

🎪 Multiple Keywords

Highlight multiple terms at once! 🌈 Perfect for complex search results and comprehensive content emphasis.

If you need to specific more than one keywords, you can pass in keywords as an array.

exportdefault { setup() { const text = 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.'; const keywords = ['time', 'life', 'answer']; return { text, keywords, }; }, };

🎨 Custom Class

Make it uniquely yours! ✨ Apply custom styling to highlighted text for perfect brand alignment and visual impact.

Set the highlight-class of the highlighted tag to customize the style.

exportdefault { setup() { const text = 'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.'; const keywords = 'life'; return { text, keywords, }; }, };

.custom-class { color: red; }

🔧 API

Complete control at your fingertips! ⚙️ Configure every aspect of text highlighting with comprehensive props and customization options.

📋 Props

Fine-tune your highlighting experience! 🎛️ From case sensitivity to custom HTML tags, these props give you complete control over text emphasis behavior.

Attribute	Description	Type	Default
auto-escape	Whether to automatically escape	boolean	true
case-sensitive	Is case sensitive	boolean	false
highlight-class	Class name of the highlight element	string	-
highlight-tag	HTML Tag of highlighted element	string	span
keywords	Expected highlighted text	*string	string[]*
source-string	Source text	string	-
tag	HTML Tag of root element	string	div
unhighlight-class	Class name of the unhighlight element	string	-
unhighlight-tag	HTML Tag of unhighlighted element	string	span

📝 Types

Full TypeScript support for enhanced development! 🚀 Import these types for better code completion and type safety.

The component exports the following type definitions:

importtype { HighlightProps, HighlightThemeVars } from'vant';

🎨 Theming

Make it uniquely yours! 🌈 Customize every visual aspect with CSS variables for perfect brand alignment.

🎛️ CSS Variables

Transform the visual appearance! ✨ Use these CSS variables to match your brand colors and design system perfectly.

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-highlight-tag-color	var(--van-primary-color)	Color of highlighted text

📚 Related Docs

Explore related components and features! 🔗 Build comprehensive text processing and search experiences with these complementary tools.

• Search - Search input and functionality
• Tag - Text tags and labels
• Text- Text display and formatting
• Cell - List-style content cells
• List - Data lists and collections
• Card - Content cards and containers
• Badge - Notification badges and indicators
• Button - Interactive buttons and actions
• Icon - Beautiful icons and symbols
• ConfigProvider - Global configuration
• Advanced Usage - Advanced implementation patterns