Markdown Preview for Habr
Расширение для VS Code: пишите статью для Хабра в Markdown, видите её в том виде,
в каком её отрисует Хабр, и узнаёте о конструкциях, которые редактор Хабра не поддерживает или искажает.
Работает с файлами *.habr.md (язык «Habr Flavored Markdown», HFM).
Расширение не связано с Хабром и не одобрено им. Рендер повторяет поведение редактора Хабра
по наблюдениям за его предпросмотром, поэтому возможны расхождения: если нашли — заведите
issue.
Возможности
Превью как на Хабре
- Заголовки, списки, цитаты, таблицы, ссылки, картинки с подписями — с теми же преобразованиями, что делает Хабр:
сдвиг уровней заголовков, расплющивание вложенных цитат, потеря форматирования в заголовках и т. д.
- Спойлеры, формулы (
$…$, $$…$$), блок <persona>, вставки видео и соцсетей (в виде заглушек).
- Подсветка кода по списку языков, которые знает Хабр.
- Локальные картинки показываются сразу, до загрузки на habrastorage.
- Светлая и тёмная тема с палитрой Хабра; переключение — в контекстном меню превью.
- Синхронизация прокрутки с редактором в обе стороны.
- Превью возвращается после перезапуска VS Code.
Диагностика
Предупреждения и подсказки прямо в редакторе, с быстрыми исправлениями там, где это возможно:
- Ломается на Хабре: ссылки и картинки без схемы,
#якоря без <anchor>, внешние <img inline>.
- Теряется молча: сноски, списки задач, вложенные цитаты, код и заголовки в цитатах, выравнивание таблиц,
ссылки вокруг картинок, неподдерживаемые HTML-теги и атрибуты, эмодзи-шорткоды, зачёркивание одной тильдой.
- Код: неизвестные языки подсветки и синонимы (
js → javascript) с заменой в один клик.
- Типографика (уровень «подсказка»): кавычки, тире и интервалы, пробелы в числах и перед единицами,
окончания порядковых числительных, даты, инициалы — по правилам Хабра.
Установка
- VSCodium, Cursor, Windsurf и другие форки — найдите «Markdown Preview for Habr» в панели расширений
(источник — Open VSX).
- VS Code — скачайте
.vsix со страницы Releases,
затем в панели расширений: меню … → Install from VSIX….
Использование
- Откройте файл с расширением
.habr.md (или назначьте язык «Habr Flavored Markdown» вручную).
- Нажмите кнопку превью в заголовке редактора или выполните команду
Открыть превью сбоку (Habr) из палитры команд.
- Правый клик по превью — переключение светлой и тёмной темы.
Настройки
| Настройка |
По умолчанию |
Описание |
hfm.diagnostics.enabled |
true |
Предупреждения о конструкциях, которые Хабр не поддерживает или ломает |
hfm.diagnostics.typography |
true |
Подсказки по типографике Хабра |
hfm.preview.theme |
auto |
Тема превью: auto (как в VS Code), light, dark |
hfm.preview.scrollSync |
true |
Синхронизировать прокрутку превью и редактора |
Ограничения
- Превью приближает отрисовку Хабра, но не заменяет его предпросмотр: перед публикацией проверьте статью на самом Хабре.
- Вставки видео и соцсетей показываются заглушками.
- Картинки на habrastorage расширение не загружает; диагностика лишь предупреждает о внешних источниках.
Разработка
npm ci
npm test # тесты, включая снапшоты по эталонам Хабра
npm run typecheck
npm run build
npm run package # .vsix
Запуск в окне разработки: F5 в VS Code (конфигурация «Запуск расширения (живое обновление)»)
или npm run host.
Правила диалекта лежат в данных, а не в коде: src/data/ (языки подсветки, вставки, тексты диагностик).
Лицензия
MIT
| |
