Highlight Groups

In some cases you might want to style highlights differently from one another. By separating highlights into groups, the ::highlight selector can be updated to target each group by name.

Directive Argument

The name of a highlight group can be set by adding an argument to the directive. Vue documentation is not very clear on this, but a directive argument is a postfix to a directive name, separated by a colon (i.e. v-highlight:${arg}).

<template>
  <div v-highlight:wild="'fox'" v-highlight:domestic="'dog'">
    <p>A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.</p>
    <p>Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.</p>
  </div>
</template>

<style>
  ::highlight(wild) {
    background-color: lightpink;
    color: black;
  }
  ::highlight(domestic) {
    background-color: lightskyblue;
    color: black;
  }
</style>

A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.

Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.

Regex Named Groups

The names of highlight groups can also be derived from the names of the capturing groups defined in the search pattern.

<template>
  <div v-highlight="/((?<wild>fox)|(?<domestic>dog))/">
    <p>A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.</p>
    <p>Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.</p>
  </div>
</template>

A swift, russet fox, full of boundless energy, propelled itself upward. With a burst of motion, it cleared a stationary dog below. This agile creature continued its journey without pause.

Beneath the airborne fox lay the dog, languid, uninterested in the world around it. The sleepy canine remained still, undisturbed by the flurry above. It seemed content in its state of repose.

IMPORTANT

The directive argument will override all names derived from capturing groups.