Naive UI Highlight Component

Highlight component for emphasizing matched text patterns, commonly used for search result highlighting.

When to Use

Use this component when:

Search results: Highlight search terms in results
Text emphasis: Emphasize specific words or patterns in text
Filtering displays: Show matched content in filtered lists
Keyword highlighting: Mark important keywords in content

When to Invoke

Invoke this skill when:

User needs to highlight search terms in text
User wants to emphasize specific words or patterns
User needs case-sensitive or case-insensitive highlighting
User wants to customize highlight styles

Features

Pattern Matching: Highlight multiple text patterns
Case Sensitivity: Optional case-sensitive matching
Custom Styles: Fully customizable highlight styles
Custom Tag: Configurable HTML element for highlights
Auto Escape: Automatic regex escaping for patterns

API Reference

Highlight Props

Name	Type	Default	Description
auto-escape	`boolean`	`true`	Auto-escape patterns for literal matching.
case-sensitive	`boolean`	`false`	Case sensitive matching.
highlight-class	`string`	`undefined`	CSS class for highlighted content.
highlight-style	`Object \| string`	`undefined`	Style for highlighted content.
highlight-tag	`string`	`'mark'`	HTML element tag for highlights.
patterns	`string[]`	`undefined`	Text patterns to highlight.
text	`string`	`undefined`	The text content to process.

Basic Usage

Basic Highlight

<template>
  <n-highlight :text="text" :patterns="patterns" />
</template>

<script setup>
const text = 'Naive UI is a Vue 3 component library that is easy to use.'
const patterns = ['Naive UI', 'Vue 3']
</script>

Custom Highlight Style

<template>
  <n-highlight
    :text="text"
    :patterns="patterns"
    :highlight-style="{
      padding: '0 6px',
      borderRadius: '4px',
      display: 'inline-block',
      color: '#fff',
      background: '#18a058',
      transition: 'all .3s ease'
    }"
  />
</template>

<script setup>
const text = 'Search for Vue components in Naive UI library'
const patterns = ['Vue', 'Naive UI']
</script>

Case Sensitive Matching

<template>
  <n-highlight :text="text" :patterns="patterns" :case-sensitive="true" />
</template>

<script setup>
const text = 'Vue is great. vue is also great.'
const patterns = ['Vue'] // Only matches 'Vue', not 'vue'
</script>

Custom Highlight Tag

<template>
  <n-highlight
    :text="text"
    :patterns="patterns"
    highlight-tag="span"
    highlight-style="text-decoration: underline; font-weight: bold;"
  />
</template>

<script setup>
const text = 'Use Naive UI for your next Vue project'
const patterns = ['Naive UI', 'Vue']
</script>

Common Patterns

Search Results Highlighting

<template>
  <n-space vertical>
    <n-input v-model:value="searchQuery" placeholder="Search..." />
    <n-list bordered>
      <n-list-item v-for="result in searchResults" :key="result.id">
        <n-highlight
          :text="result.content"
          :patterns="searchPatterns"
          :highlight-style="{
            backgroundColor: '#fff700',
            fontWeight: 'bold'
          }"
        />
      </n-list-item>
    </n-list>
  </n-space>
</template>

<script setup>
import { computed, ref } from 'vue'

const searchQuery = ref('')
const searchResults = ref([
  { id: 1, content: 'Naive UI is a Vue 3 component library' },
  { id: 2, content: 'Vue 3 composition API is powerful' },
  { id: 3, content: 'Build modern web apps with Vue' },
])

const searchPatterns = computed(() => 
  searchQuery.value ? [searchQuery.value] : []
)
</script>

Multiple Pattern Highlighting

<template>
  <n-highlight
    :text="text"
    :patterns="['important', 'urgent', 'critical']"
    :highlight-style="{
      color: '#fff',
      backgroundColor: '#d03050',
      padding: '2px 6px',
      borderRadius: '3px'
    }"
  />
</template>

<script setup>
const text = 'This is an important message that requires urgent attention. It is critical to respond quickly.'
</script>

Highlight with Theme Variables

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <n-highlight
      :text="text"
      :patterns="patterns"
      :highlight-style="{
        padding: '0 4px',
        borderRadius: themeVars.borderRadius,
        color: themeVars.baseColor,
        background: themeVars.primaryColor
      }"
    />
  </n-config-provider>
</template>

<script setup>
import { useThemeVars } from 'naive-ui'

const themeVars = useThemeVars()
const text = 'Highlight with theme colors in Naive UI'
const patterns = ['Naive UI']
</script>

Dynamic Pattern Highlighting

<template>
  <n-space vertical>
    <n-dynamic-tags v-model:value="patterns" />
    <n-highlight
      :text="text"
      :patterns="patterns"
      :highlight-style="{
        backgroundColor: '#18a058',
        color: '#fff',
        padding: '0 4px',
        borderRadius: '2px'
      }"
    />
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const text = 'Vue 3 is great. TypeScript is awesome. Naive UI is beautiful.'
const patterns = ref(['Vue 3', 'TypeScript'])
</script>

Highlight in Table

<template>
  <n-data-table :columns="columns" :data="data" />
</template>

<script setup>
import { h, ref } from 'vue'
import { NHighlight } from 'naive-ui'

const searchQuery = ref('Vue')

const columns = [
  {
    title: 'Description',
    key: 'description',
    render(row) {
      return h(NHighlight, {
        text: row.description,
        patterns: [searchQuery.value],
        highlightStyle: { backgroundColor: '#fff700' }
      })
    }
  }
]

const data = [
  { description: 'Vue 3 composition API guide' },
  { description: 'Vue Router documentation' },
  { description: 'Pinia state management for Vue' },
]
</script>

Best Practices

Use auto-escape for user input: Keep auto-escape true for literal matching
```
<n-highlight :text="text" :patterns="userInput" :auto-escape="true" />
```
Debounce search patterns: Optimize performance with frequent pattern changes
```
const debouncedPatterns = useDebounceFn(() => patterns.value, 300)
```

Use semantic highlight tags: Choose appropriate HTML elements

<n-highlight highlight-tag="mark" /> <!-- Default, semantic -->
<n-highlight highlight-tag="span" /> <!-- Generic -->

Consider accessibility: Ensure sufficient color contrast

<n-highlight
  :highlight-style="{
    backgroundColor: '#fff700',
    color: '#000'
  }"
/>

Handle empty patterns gracefully: Check for empty patterns array

<n-highlight
  :text="text"
  :patterns="searchQuery ? [searchQuery] : []"
/>

n-highlight

SKILL.mdcomponents/n-highlight/SKILL.md