Mark Types and Shapes

Mark Types and Shapes

@highlighters draws four kinds of mark: a highlight band, an underline, an overline, and a strike-through. All four are the same band primitive running the same ink physics, edge model, tip geometry, and colour pipeline. They differ only in where the band sits vertically and how thick it is. A highlight covers the whole line; the other three are thin bands pinned to the bottom, top, or middle of the line box.

You pick the kind with markType (or its synonym shape). The default is "highlight".

type MarkType = "highlight" | "underline" | "overline" | "strike-through";
type ShapeType = MarkType; // identical alias

shape and markType are synonyms. If you pass both, markType wins, then shape, then whatever was already on the base config. Internally both collapse onto markType. Use whichever name reads better in your code; this page uses markType.

---

How the band is positioned

Every kind resolves to one band: a vertical offset into the line box and a height. The thin kinds use thin = max(2px, lineHeight * 0.12), so they scale with font size and never drop below 2px.

markType	Vertical offset	Band height	Looks like
"highlight"	top of the line	full line height	A wet marker swipe over the whole word.
"underline"	bottom of the line	thin	A hand-drawn rule under the text.
"overline"	top of the line	thin	A rule above the text.
"strike-through"	vertically centred	thin	A line struck through the middle of the text.

Everything else is shared. The same tip, ink, edge, paper, glow, color/palette, opacity, blendMode, snapping, and animation options apply to all four. A chisel nib leans the underline exactly as it leans a highlight; feathering and dry-out fray a strike-through edge the same way they fray a highlight band. See Ink-and-Optics, Tips-and-Edges, and Color-and-Palettes.

---

highlight (default)

A tall band covering the full line height, like a real highlighter pen drawn across the text. This is the default markType, so you get it for free.

When to use: the primary case. Emphasising passages, colour-coding notes, marking search hits, live-selection highlighting. It composites with mix-blend-mode: multiply by default, so overlapping marks darken and dark text stays readable underneath. See Ink-and-Optics.

import { highlight } from "@highlighters/core";

highlight("#intro"); // markType defaults to "highlight"
highlight(".key-point", { markType: "highlight" }); // explicit, same result

---

underline

A thin band pinned to the bottom of the line box. Because it runs the same edge and ink model, it reads as an inked, slightly organic rule rather than a flat CSS text-decoration.

When to use: marking links, terms, or call-outs where a full band would be too heavy, or where you want emphasis that does not sit on top of the glyphs. Pairs well with tip.type: "fine" for a pen-like line and a lower edge.waviness for a steadier rule.

highlight(".term", { markType: "underline" });

// A cleaner, finer rule
highlight(".term", {
  markType: "underline",
  tip: { type: "fine" },
  edge: { waviness: 0.4 },
});

---

overline

A thin band pinned to the top of the line box. The mirror of underline.

When to use: rarer. Headers, table-column emphasis, or paired with an underline to box a line top-and-bottom. Same options as underline.

highlight("h2", { markType: "overline" });

---

strike-through

A thin band centred vertically across the text, struck through the glyphs.

When to use: redactions, edits, done/cancelled states, before/after diffs. With blendMode: "multiply" the struck text stays legible through the ink; raise opacity or switch to blendMode: "normal" if you want the strike to read more strongly. See Ink-and-Optics for blend behaviour.

highlight(".removed", { markType: "strike-through" });

// A heavier, more opaque strike
highlight(".removed", {
  markType: "strike-through",
  opacity: 0.8,
  color: "#d14",
});

---

Choosing a kind

• Cover the words → highlight.
• Mark under the words without covering them → underline.
• Mark above the words → overline.
• Cross the words out → strike-through.

Switching kinds never changes the colour, tip, or ink behaviour you configured. You can swap markType on an existing mark via handle.update({ markType }) and the geometry re-resolves in place without re-seeding. See API-Reference for the handle.

const h = highlight(".note"); // highlight band
h.update({ markType: "underline" }); // same colour and ink, now an underline

---

Across the frameworks

markType (or shape) is an ordinary option, so it works identically in every binding.

React

import { Highlight } from "@highlighters/react";

function Diff() {
  return (
    <p>
      <Highlight options={{ markType: "strike-through" }}>old value</Highlight>{" "}
      <Highlight options={{ markType: "highlight" }}>new value</Highlight>
    </p>
  );
}

With the hook:

import { useRef } from "react";
import { useHighlight } from "@highlighters/react";

function Term() {
  const ref = useRef<HTMLElement>(null);
  useHighlight(ref, { markType: "underline" });
  return <span ref={ref}>important term</span>;
}

Vue

<script setup lang="ts">
import { Highlight } from "@highlighters/vue";
</script>

<template>
  <p>
    <Highlight :options="{ markType: 'strike-through' }">old value</Highlight>
    <Highlight :options="{ markType: 'highlight' }">new value</Highlight>
  </p>
</template>

With the composable:

<script setup lang="ts">
import { ref } from "vue";
import { useHighlight } from "@highlighters/vue";

const el = ref<HTMLElement | null>(null);
useHighlight(el, { markType: "underline" });
</script>

<template>
  <span ref="el">important term</span>
</template>

Svelte

<script lang="ts">
  import { highlight } from "@highlighters/svelte";
</script>

<span use:highlight={{ markType: "underline" }}>important term</span>
<span use:highlight={{ markType: "strike-through" }}>removed text</span>

---

Notes and limits

• markType and shape are the only mark-kind options. There is no box, circle/encircle, bracket, or scribble mark kind. The four above are the full set. See Limitations.
• The thin kinds (underline, overline, strike-through) ride the line box, so their thickness tracks font size via thin = max(2px, lineHeight * 0.12). They are not driven by tip.width or tip.thickness, which are schema-only fields the renderer does not consume. See Tips-and-Edges.
• Multiline targets get one band per visual line for every kind, snapped to the line rects. See Snapping-and-Overshoot.
• All four kinds are deterministic from a seed and identical on server and client. See How-It-Works and SSR-Support.

For the full option surface see Options-Reference; for ready-made looks see Recipes.