← Блог

Редактор Drafta: Markdown, превью и split

Редактор — то место, где я провожу в Drafta почти всё время. Поэтому он построен вокруг простого правила: заметка остаётся обычным Markdown, а всё остальное — подсветка, диаграммы, формулы — рисуется поверх текста и ничего в нём не меняет. Это продолжение статьи Вышел Drafta 1.0.

CodeMirror 6 и 50+ языков

Внутри окна работает редактор CodeMirror 6. Блоки кода подсвечиваются для больше чем 50 языков: Python, Rust, TypeScript, Go, SQL, YAML, Bash и других. Заголовки, списки, задачи и ссылки подсвечиваются прямо в исходнике.

Исходный Markdown заметки в режиме редактора: номера строк, подсвеченный заголовок, блок mermaid, нумерованный список и чек-лист

Режим редактора: Markdown с номерами строк, подсвеченный блок mermaid, список и задачи.

Над текстом — панель форматирования: жирный, курсив, зачёркивание, ссылка, списки, задачи, код, таблица, формула, диаграмма и картинка. Под текстом — строка состояния со счётчиком слов, символов и временем чтения.

Три режима просмотра

У каждой заметки три режима:

  1. Редактор — только исходный Markdown.
  2. Превью — отрендеренная заметка.
  3. Split — исходник слева, превью справа, прокрутка синхронная.

Режимы переключаются кнопками в правом нижнем углу редактора. Отдельного сочетания клавиш для них нет. Режим по умолчанию задаётся в настройках.

Режим split: слева Markdown заметки со списком идей, справа та же заметка отрендеренной

Split: слева текст, справа результат. Wiki-ссылка в превью уже работает как ссылка.

Живое превью: Mermaid, KaTeX, таблицы

Превью рисует то, что обычный Markdown показывает текстом:

  • диаграммы Mermaid — flowchart, state, sequence, class, ER и другие;
  • формулы KaTeX — строчные $…$ и блочные $$…$$;
  • таблицы, сноски, wiki-ссылки [[Заголовок]];
  • чекбоксы задач, которые можно отмечать кликом прямо в превью.

Превью заметки: диаграмма Mermaid из пяти блоков, нумерованный список, цитата и чек-лист

Блок mermaid из исходника превратился в схему «Note on disk → Encrypt → Replicate».

Блоки кода в превью получают номера строк, подпись языка и кнопку копирования. Таблицы рисуются сеткой. Диаграммы переживают экспорт в PDF и DOCX — они уходят туда картинками.

Превью заметки с HTTP- и JSON-блоками кода с номерами строк и таблицей эндпоинтов

Код с подписью языка и номерами строк, под ним таблица — всё из обычного Markdown.

Callouts

Для одной строки, которую нельзя пропустить, есть callouts в формате GitHub. Пять типов: NOTE, TIP, IMPORTANT, WARNING, CAUTION. В превью каждый рисуется цветной плашкой, в редакторе подсвечивается фоном.

Оглавление и статистика

Длинную заметку удобно читать с оглавлением. Панель Contents собирает заголовки и переносит к нужному по клику. Показывать её сразу можно включить в настройках.

Заметка-шпаргалка по Markdown с панелью оглавления справа

Справа — оглавление заметки: пять заголовков, текущий подсвечен.

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

Поповер статистики: 148 слов, 823 символа, 13 абзацев, 1 минута чтения, теги и даты

Статистика одной заметки: 148 слов, 823 символа, 13 абзацев.

Настройки редактора

Раздел Editor в настройках отвечает за вид и поведение текста:

  • номера строк, перенос длинных строк, подсветка активной строки, прокрутка за конец текста;
  • проверка орфографии и автоисправление опечаток;
  • задержка автосохранения;
  • режим Vim.

Шрифт, размер, межстрочный интервал и ширина табуляции живут в пресетах типографики — о них в отдельной статье о темах.

Настройки редактора: переключатели отображения, проверка орфографии, автосохранение и режим Vim

Раздел Editor: отображение, правка и поведение, включая режим Vim.

Кроме этого в редакторе есть закладки на строки, минимап и режим фокуса. Закладкам и связям между заметками посвящена следующая статья.

← Все посты