Как просматривать Markdown онлайн, не загружая файлы на сервер

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

В этом руководстве мы сравним распространённые способы просмотра Markdown, перечислим функции, которые по-настоящему важны в работе, и покажем быстрый процесс: локальные файлы открываются в браузере — без установки программ и без отправки на сервер.

Три способа просматривать Markdown

1. Предпросмотр в редакторе кода

В VS Code, IDE от JetBrains и многих других редакторах есть встроенный предпросмотр Markdown. Это хороший вариант, если вы и так всё время в этом редакторе. Минусы: редактор нужно установить, для формул и диаграмм часто требуются расширения, и такой инструмент не дашь быстро коллеге, который просто хочет прочитать README.md.

2. Онлайн-просмотрщик Markdown

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

3. Просмотрщик на своём сервере

Статическое веб-приложение, размещённое у вас, сочетает удобство сайта с полным контролем: оно живёт на вашем домене, одинаково выглядит для всей команды, и только вы решаете, что оно может и чего не может. Подробно этот вариант описан в статье о том, как разместить Markdown-редактор на своём сервере.

На что смотреть при выборе просмотрщика Markdown

Не каждым просмотрщиком одинаково приятно пользоваться. Вот что становится важным, когда работаешь с ним каждый день:

• Мгновенная отрисовка. Предпросмотр должен обновляться прямо во время ввода — без кнопки «Показать» и заметных задержек.
• Синхронная прокрутка. В длинном документе предпросмотр должен следовать за редактором, чтобы редактируемый абзац всегда был виден справа.
• GitHub-Flavored Markdown. Таблицы, списки задач, зачёркивание, сноски и блоки-предупреждения должны выглядеть так же, как на GitHub. Если не уверены, что это такое, загляните в шпаргалку по Markdown.
• Подсветка кода для языков, на которых вы пишете.
• Формулы и диаграммы, если вы пишете техническую документацию: формулы LaTeX и диаграммы Mermaid.
• Открытие локальных файлов. Перетаскивание должно работать для одного файла, нескольких файлов и целых папок — вместе с картинками, на которые ссылается документ.
• Экспорт. Готовый документ обычно нужен в HTML, PDF или в виде чистого .md-файла.
• Локальная обработка. В идеале текст отрисовывается в браузере и никогда не покидает компьютер. Это важно для внутренней документации, договоров, черновиков и заметок.

Быстрый процесс с Markdown Preview Editor

Markdown Preview Editor — бесплатный редактор с открытым кодом, построенный как раз вокруг этого списка. Вот как выглядит типичная работа с ним.

Шаг 1. Откройте редактор

Откройте онлайн-версию или свою копию. Никакой регистрации и ничего не нужно устанавливать. Интерфейс доступен на 15 языках и автоматически подстраивается под язык браузера.

Шаг 2. Откройте файлы

Перетащите .md-файл в редактор — или сразу несколько файлов, или целую папку. Каждый документ открывается в своей вкладке со своей историей отмены. Картинки, аудио и видео, перетащенные вместе с документом, появляются в предпросмотре: относительные пути разрешаются по перетащенной папке.

Предпочитаете клавиатуру? Нажмите Ctrl+O (⌘O на Mac), чтобы выбрать файлы, или кнопку Папка, чтобы открыть каталог.

Шаг 3. Пишите, глядя на предпросмотр

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

Переключайтесь между тремя режимами одним щелчком: только редактор, оба окна рядом и только просмотр. На телефоне макет подстраивается автоматически, а панель инструментов прячется, пока не понадобится.

Шаг 4. Сохраните или экспортируйте

Закончив, сохраните документ как .md, экспортируйте его в самостоятельный HTML-файл или распечатайте в PDF. Все варианты подробно разобраны в статье о конвертации Markdown в HTML и PDF.

Куда попадают ваши файлы?

У многих веб-инструментов непросто понять, загружается ли ваш текст на сервер. Полезная проверка: откройте инструменты разработчика в браузере, перейдите на вкладку Network (Сеть) и напечатайте что-нибудь. Если во время ввода появляются новые запросы, ваш текст, возможно, покидает страницу.

Markdown Preview Editor отрисовывает всё в браузере. Открытые файлы читаются локально, а документы хранятся только в открытой вкладке, если вы не включите в настройках Запоминать документы в этом браузере. Внешние картинки и ссылки в документе не загружаются, пока вы их не разрешите, поэтому простое открытие файла тоже не обращается к чужим серверам.

Советы для удобного предпросмотра

• Храните картинки рядом с документом в папке images/ или assets/ и ссылайтесь на них относительными путями. Затем перетащите папку целиком — и всё отобразится.
• Используйте один заголовок # на файл. Он становится заголовком экспортированного HTML и упрощает навигацию по длинным документам.
• Включите номера строк в настройках, когда работаете над документацией вместе с коллегами, — так комментарии вида «строка 42» легко найти.
• Пользуйтесь тёмной темой ночью. Предпросмотр меняет тему вместе с редактором.