Перейти к основному содержимому

Возможности

На этой странице описаны встроенные возможности в соответствии с их фактической реализацией в исходном коде.

Инкрементальный рендеринг​

Для быстрой работы с большими документами предпросмотр использует инкрементальный рендеринг отдельных блоков:

  • Разбиение на блоки (splitIntoBlocks): исходный текст разделяется по строкам заголовков ATX (от # до ######). Содержимое блоков кода, ограниченных обратными кавычками или тильдами, никогда не служит точкой разделения; заголовки внутри пользовательских контейнеров ::: также сохраняются. Документ без заголовков обрабатывается как один блок.
  • Рендеринг отдельных блоков: повторно через markdown-it / KaTeX проходят только блоки с изменившимся хешем содержимого. Неизменённые блоки напрямую используют существующие узлы DOM, включая уже активированные SVG интеллект-карт.
  • Кеш по хешу содержимого: результаты сохраняются по хешу содержимого (быстрый хеш типа djb2 вместе с длиной), поэтому отмена/повтор и вставка одинаковых абзацев тоже используют кеш. Когда в кеше больше 800 записей, удаляются хеши, которых уже нет в документе. Записи текущих блоков сохраняются, поэтому документ с более чем 800 различными блоками может превышать этот порог.
  • Изменение порядка: переставляемые блоки перемещаются путём добавления существующих узлов в DocumentFragment.
  • Адаптивная задержка (adaptiveDebounceMs(docLength, base = 120, max = 600)): пауза перед рендерингом равна base + floor(docLength / 20000) * 60 и ограничена значением max. Измените её через renderDebounce или задайте renderDebounce: false для синхронного рендеринга.
  • content-visibility: auto: каждый блок оборачивается в элемент .md-editor-block, чтобы пропускать расчёт расположения и отрисовку блоков вне экрана.

Ошибка рендеринга одного блока не очищает весь предпросмотр: вместо него выводится экранированный исходный текст в <pre>.

Формулы KaTeX​

Самостоятельный математический плагин markdown-it отображает формулы через KaTeX (без зависимости от markdown-it-texmath):

  • Строчные формулы: $E=mc^2$ — содержимое не должно быть пустым или включать $ и перенос строки. Выражения, похожие на денежные суммы, например $5 и $10.50, исключаются эвристически.
  • Блочные формулы: 
    $$
    \int_0^1 x^2 \, dx
    $$
    Поддерживаются однострочная ($$ ... $$) и многострочная формы. CSS KaTeX входит в пакет. Для отключения используйте math: false.

Интеллект-карты Markmap​

Создайте ограждённый блок ```mindmap с иерархическим планом в Markdown:

```mindmap
# Root topic
## Branch one
- Child A
- Child B
## Branch two
- Child C
```

Правило обработки блока отслеживает глубину вложенности ограждений, сохраняя блоки кода внутри интеллект-карты. Синхронный рендеринг создаёт заполнитель <div>; Renderer.hydrate(container) асинхронно импортирует markmap-lib и markmap-view и превращает каждый заполнитель в интерактивный SVG. Ошибки активации не являются фатальными. Для отключения используйте mindmap: false.

Подсветка кода с кнопкой копирования​

Ограждённые блоки кода подсвечиваются через highlight.js. Сборка регистрирует фиксированный набор языков: JavaScript, TypeScript, Python, JSON, Bash/Shell, CSS, XML/HTML/SVG, SQL, YAML, Markdown, Go, Rust, Java, C и C++ (с распространёнными псевдонимами js, ts, py, sh, yml, md, rs, c++). Неизвестный язык определяется автоматически; при неудаче выводится экранированный обычный текст.

Каждый подсвеченный блок помещается в контейнер в стиле macOS с тремя цветными точками, названием языка и кнопкой Копировать. Кнопка использует делегирование событий в панели предпросмотра и обращается к document.execCommand('copy'), если Clipboard API недоступен. Для отключения используйте codeHighlight: false.

Действия панели инструментов​

В режиме complex панель состоит из следующих 22 действий в указанном порядке по умолчанию:

#Имя действияНазначение
1headingЗаголовок
2boldПолужирный (Ctrl+B)
3italicКурсив (Ctrl+I)
4linkСсылка (Ctrl+K)
5imageВставить изображение
6videoВставить видео
7youtubeВставить видео YouTube
8quoteЦитата
9ulМаркированный список
10olНумерованный список
11tasklistСписок задач
12mentionУпоминание (@)
13doclinkВставить ссылку на документ
14codeБлок кода
15tableТаблица
16mathМатематическая формула
17mindmapВставить интеллект-карту
18hrГоризонтальная линия
19tipsВставить информационный блок
20previewПереключить предпросмотр
21helpСочетания клавиш
22themeПереключить тему

Встроенные подписи — на английском языке. Переопределяйте label для отдельных элементов, чтобы локализовать подсказки и доступные имена. Некоторые действия открывают диалоги или выбор шаблонов: изображение, видео, YouTube, таблица, формула (шаблоны), интеллект-карта (шаблоны), информационный блок (сетка типов) и справка. Настраивайте панель параметром toolbar, как описано в разделе Настройка.

Сочетания клавиш​

Встроенные сочетания определены в DEFAULT_SHORTCUTS. Mod означает Ctrl в Windows/Linux и Cmd в macOS.

КлавишаДействиеОписание
Mod-bboldПолужирный
Mod-iitalicКурсив
Mod-Alt-1headingЗаголовок
Mod-klinkВставить ссылку
Mod-Alt-ccodeБлок кода
Mod-Shift-.quoteБлочная цитата
Mod-Shift-8ulМаркированный список
Mod-Shift-7olНумерованный список
Mod-Shift-9tasklistСписок задач
Mod-Alt-mmathМатематическая формула
Mod-Alt-ppreviewПереключить предпросмотр
Mod-Shift-lthemeПереключить тему

Кнопка Справка на панели открывает диалог со списком сочетаний в виде клавиш и краткой памяткой по спискам задач, упоминаниям, ссылкам на документы, формулам, интеллект-картам и информационным блокам.

Загрузка изображений​

Передайте onImageUpload: (file: File) => Promise<string>. Обработчик вызывается при вставке или перетаскивании файла изображения в редактор. Окно изображения принимает URL и не предлагает выбор файла. Верните общедоступный URL изображения; редактор вставит ![alt](url) в позицию курсора (альтернативным текстом станет имя файла без расширения). Ошибки загрузки подавляются без сообщения, после чего пользователь может повторить попытку.

@mention​

Передайте параметр mention, чтобы при вводе @ появлялся раскрывающийся список с поиском:

  • onMentionSearch(query) возвращает подходящие элементы MentionItem.
  • onMentionSelect(item) возвращает вставляемый текст. По умолчанию это [@label](mention:id), который рендерер превращает в оформленный значок.
  • minChars (по умолчанию 0) и maxItems (по умолчанию 8) настраивают список.

Список поддерживает навигацию через ArrowUp/ArrowDown, Enter/Tab и Escape и закрывается при потере фокуса редактором. В предпросмотре обычный текст с @, например @media, не превращается в значок; так отображаются только ссылки со схемой mention:. При этом в редакторе такой текст всё ещё может вызывать настроенный обработчик поиска.

Ссылки на документы​

Передайте docLink, чтобы после символа-триггера (по умолчанию /) открывался список поиска документов:

  • onDocSearch(query) возвращает подходящие элементы DocItem.
  • onFetchDocMeta(url) получает заголовок, миниатюру и описание. Встроенная реализация читает теги Open Graph через fetch + DOMParser и может завершиться ошибкой, если сервер другого источника не разрешает CORS. При необходимости используйте собственный серверный прокси.
  • insertStyle определяет способ вставки: 'auto' (карточка при наличии метаданных), 'card' или 'link'.

Выбранный документ вставляется как обычная ссылка либо как карточка :::doc-link с заголовком, миниатюрой, описанием и именем хоста, по которой можно перейти к документу.

Предупреждения и информационные блоки​

Создайте контейнер ::: одного из шести типов. В открывающей строке после типа можно указать заголовок:

:::notice
This is a notice.
:::

:::warning[Title here]
Warning content.
:::

Поддерживаемые типы: notice, info, tip, success, warning, danger. Каждый отображается со значком, цветной левой границей и заголовком. Кнопка информационного блока открывает визуальный выбор всех шести типов. Для отключения используйте tips: false.

Списки задач​

Пункты, соответствующие - [ ] или - [x] (с произвольными пробельными символами в скобках), отображаются как неактивные флажки. Обратите внимание на правило проекта: - [ ] отображается установленным (зелёным), а - [x] — снятым — в противоположность GitHub Flavored Markdown. Кнопка списка задач переключает маркеры текущей строки или выбранных строк.

Дальнейшие шаги​