---
title: "Инструмент «Маркер» — подсветка текста цветом"
description: "Подсвечивает выделение маркером, даёт выбрать цвет и показывает разметку, которая при этом сохраняется в блоке."
source: https://blokeditor.com/ru/docs/marker/
lastmod: 2026-10-07
---

Фреймворк JavaScript

Строчные инструменты Маркер

# Маркер: подсветка текста цветом

Применяет к выделенному тексту цвет текста или цвет фона. Используется `<mark style="color:...">` или `<mark style="background-color:...">`.

Нажмите кнопку на панели инструментов, чтобы открыть палитру. Сначала в ней идут недавно использованные цвета, затем разделы «Цвет текста» и «Фон». В каждом разделе есть образец «По умолчанию» и девять готовых цветов. Образец «По умолчанию» убирает этот цвет.

Каждый цвет нормализуется в CSS-переменную (`var(--blok-color-<name>-<text|bg>)`), чтобы темы могли его переопределить.

Палитра предлагает только девять предустановленных цветов. Любой другой CSS-цвет, применённый программно, притягивается к перцептивно ближайшему из них. Порога расстояния нет.

Без изменений проходят только три вида значений.

- Значения, уже записанные как `var(...)`.
- Значения, которые парсер цвета прочитать не может, например именованный CSS-цвет `rebeccapurple`.
- Цвета фона страницы по умолчанию.

Сырые цвета могут стоять на элементах `<mark>`, например вставленных из другого редактора. При загрузке они переписываются в ближайшую предустановленную переменную. Поэтому произвольные hex-значения не сохраняются.

Cmd/Ctrl+Shift+H палитру не открывает. Это сочетание сразу применяет к выделению последний выбранный в этой сессии цвет. При первом использовании это жёлтая подсветка (`var(--blok-color-yellow-bg)`). Когда выделение схлопнуто, оно ничего не делает.

### Импорт

TypeScript

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

### Формат данных

TypeScript

```
// A colour mark on a run of the block's text field. A preset is saved by name.
// Text colour:       { "text": "red text", "marks": { "color": "red" } }
// Background colour: { "text": "highlighted text", "marks": { "background": "yellow" } }
```

JSON

```
{
  "type": "paragraph",
  "data": {
    "text": [{ "text": "highlighted text", "marks": { "background": "yellow" } }]
  }
}
```

### Пример использования

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,
  },
});
```