---
title: "Marker Inline Tool — Highlight Text"
description: "Highlight a selection with the marker tool, pick a colour, and see the markup it stores in the block."
source: https://blokeditor.com/docs/marker/
lastmod: 2026-09-07
---

Framework JavaScript

Inline Tools Marker

# Marker: highlight text with colour

Applies text colour or background colour to selected text using `<mark style="color:...">` or `<mark style="background-color:...">`. Click the toolbar button, then choose the Text color or Background tab. Each tab shows preset swatches, a selected-colour preview, and a Default reset. Recently used colours appear below the palette. Every colour is normalised to a CSS custom property (`var(--blok-color-<name>-<text|bg>)`) so themes can restyle it: the picker offers only the nine presets, and any other CSS colour applied programmatically is snapped to the perceptually nearest preset. There is no distance threshold — only values already written as `var(...)`, values the colour parser cannot read (a CSS named colour such as `rebeccapurple`), and the default page background colours pass through untouched. Raw colours found on `<mark>` elements — e.g. pasted from another editor — are rewritten to the nearest preset var on load, so arbitrary hex values are not preserved. Cmd/Ctrl+Shift+H does not open the picker: it re-applies the last colour picked in this session straight to the selection, defaulting to a yellow highlight (`var(--blok-color-yellow-bg)`) on first use, and does nothing when the selection is collapsed.

### Import

TypeScript

```
import { Marker } from '@bloklabs/core/tools';
```

### Save Data

TypeScript

```
// Stored as HTML inside the block's text field.
// Text colour:       '<mark style="color: var(--blok-color-red-text); background-color: transparent;">red text</mark>'
// Background colour: '<mark style="background-color: var(--blok-color-yellow-bg);">highlighted text</mark>'
```

JSON

```
{
  "type": "paragraph",
  "data": {
    "text": "<mark style=\"background-color: var(--blok-color-yellow-bg);\">highlighted text</mark>"
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Marker, Paragraph } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    // Paragraph is the default block and is not bundled with the core —
    // without it the editor starts with an "unsupported block" stub.
    paragraph: Paragraph,
    marker: Marker,
  },
});
```