Як переглядати 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» легко знайти.
• Вночі користуйтеся темною темою. Перегляд змінює тему разом із редактором.