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

```
// 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>"
  }
}
```

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

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