skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-highlight

Highlight text patterns with configurable case sensitivity and custom styles in Vue apps.

8|3|Updated Mar 13, 2026
Search Tags:#ui#vue#component#pattern#text#highlight#naive-ui
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-highlight
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-highlight
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-highlight
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-highlight

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Highlight patterns within text content to visually emphasize matches, improving readability in search results and content-intensive interfaces.

Core Features & Use Cases

  • Pattern Matching: Highlight multiple patterns within a single text.
  • Case Sensitivity: Optional case-sensitive matching for precise highlights.
  • Custom Styles: Fully customizable highlight styles and tags for accessibility.
  • Use Case: Show matched terms in search results, emphasis important keywords in lists, and highlight relevant content in data tables.

Quick Start

Pass the text and the patterns to the component to render highlighted matches in your UI.

Frequently Asked Questions about n-highlight

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I highlight matched text in Vue search results?▼

To highlight matched text in Vue search results, pass your text content and search patterns to the component. It renders the matches with customizable styles to visually emphasize the keywords in your UI.

Can I highlight multiple patterns in a single text string?▼

Yes, you can highlight multiple patterns within a single text string. The component supports configurable patterns, allowing you to emphasize several different keywords or phrases simultaneously across your content displays.

Does naive-ui support case-sensitive text highlighting?▼

Yes, case-sensitive text highlighting is supported as an optional feature. You can enable precise matching for your search patterns to ensure only exact case matches are visually emphasized in the rendered output.

What is the best way to customize highlight styles in a Vue component?▼

The best way to customize highlight styles is by configuring the component's style and tag options. This allows you to apply fully customizable visual emphasis and accessibility tags to matched text patterns in your data displays.

When should I use a text highlight component in a content editor?▼

You should use a text highlight component in a content editor when you need to visually emphasize matched patterns to improve readability. It is suitable for emphasizing important keywords in lists, data tables, and search interfaces.

Related Skills

Explore More Software Engineering Skills→
adriaanmostert1976-labadriaanmostert1976-lab

framework-slide-designer

Generate framework slides from structured axes and content inputs.

Community
Intermediate
ahandselahandsel
1

ux-key-searcher

Match highlighted UX copy in Markdown tables against CSV phrase files to populate translation key metadata.

Community
Intermediate
jiaiyanjiaiyan
8

n-gradient-text

Render gradient text with configurable size and type in Vue 3.

Community
Intermediate
abdulahad139abdulahad139

task-search

Search tasks by text with relevance ranking and matched-term highlighting.

Community
Advanced