Mark

Marks a fragment of text, such as a search hit or something to notice.

Searching for “ spice ” found 3 results; volume three of Spice and Wolf mentions the spice most often.

<script setup lang="ts">
  import { Mark, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    Searching for “
    <Mark>spice</Mark>
    ” found 3 results; volume three of Spice and Wolf mentions the
    <Mark>spice</Mark>
    most often.
  </Text>
</template>

vue

Usage

import { Mark } from '@hina-ui/vue'

The component renders a native mark element with a tinted background and a very small radius. The text colour is unchanged, so reading is not interrupted.

In this sentence the marked words carry a background.

<script setup lang="ts">
  import { Mark, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    In this sentence
    <Mark>the marked words</Mark>
    carry a background.
  </Text>
</template>

vue

Examples

Marking search hits

Split the text on the keyword and wrap each hit in the component. A single passage can carry several marks.

Keyword: course

Volume one of Spice and Wolf follows a travelling merchant and a girl who calls herself a harvest deity.

<script setup lang="ts">
  import { Mark, Stack, Text } from '@hina-ui/vue'

  const keyword = 'course'
  const paragraph =
    'Volume one of Spice and Wolf follows a travelling merchant and a girl who calls herself a harvest deity.'
  const parts = paragraph.split(keyword)
</script>

<template>
  <Stack class="max-w-lg">
    <Text size="sm" tone="muted">Keyword: {{ keyword }}</Text>
    <Text>
      <template v-for="(part, index) in parts" :key="index">
        {{ part }}
        <Mark v-if="index < parts.length - 1">{{ keyword }}</Mark>
      </template>
    </Text>
  </Stack>
</template>

vue

Marks in body content

Prose applies the same styling to native mark elements inside it, so rendered Markdown and rich text need no tag replacement.

A mark tag in body content needs no separate component.

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>
      A
      <mark>mark</mark>
      tag in body content needs no separate component.
    </p>
  </Prose>
</template>

vue

API

Props

Prop	Type	Default	Description
`class`	`string`	—	Classes appended to the root

Slots

Slot	Description
`default`	The marked text