Редактор Markdown

Как превратить обычный текст в документ

Черновик заметки и оформленный документ рядом на рабочем столе

Markdown позволяет оформлять текст символами с клавиатуры: решётка обозначает заголовок, звёздочки выделяют слова, дефис начинает пункт списка. Например, запись **Встреча в 10:00** превращается в жирную фразу «Встреча в 10:00». Исходник при этом остаётся обычным текстом, который можно открыть почти в любом редакторе.

Здесь вы пишете слева и сразу видите оформление справа. На телефоне предпросмотр находится под исходником. Кнопка «Скачать .md» сохраняет документ с разметкой, а не картинку результата. Такой файл удобно хранить вместе с проектом, передавать коллеге или переносить в другой сервис, поддерживающий Markdown.

Формат появился в 2004 году: его создал Джон Грубер при участии Аарона Шварца. Идея проста: исходный текст должен читаться даже без преобразования. В заметке - купить билеты смысл понятен и человеку, который никогда не слышал слово Markdown. Отсюда его удобство для инструкций, рабочих записей и README, вводного файла с описанием проекта.

Заголовки, абзацы и выделение

Для заголовка поставьте от одной до шести решёток, затем пробел и название. Запись # Поездка создаёт заголовок первого уровня, а ## Билеты обозначает раздел внутри документа. Уровень показывает место в структуре. Не стоит перескакивать с первого сразу на четвёртый только ради размера букв: размер зависит от оформления площадки, а структура остаётся с текстом.

Абзацы разделяются пустой строкой. Одиночный перевод строки внутри абзаца обычно ведёт себя как пробел, поэтому несколько коротких строк исходника могут стать одним цельным абзацем. Для принудительного переноса поставьте в конце строки два пробела или обратную косую черту. Такой приём полезен для почтового адреса или стихотворения; обычной прозе достаточно абзацев.

Одна звёздочка с каждой стороны слова даёт курсив: *важно*. Две дают сильное выделение: **важно**. Подчёркивания тоже поддерживаются, но звёздочки удобнее в тексте с именами файлов вроде project_notes.md. Чтобы показать сам служебный знак, поставьте перед ним обратную косую черту: \*звёздочка\* останется обычной записью со звёздочками.

Списки, цитаты, ссылки и код

Маркированный список начинается с дефиса и пробела. Каждый новый пункт пишется с новой строки. Для нумерованного списка используйте число с точкой: 1. Подготовить документы. Порядок дальше строится автоматически, поэтому одинаковые единицы в исходнике всё равно дадут последовательность 1, 2, 3. Если список начинается с 5., предпросмотр начнёт нумерацию с пяти.

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

Ссылка состоит из подписи в квадратных скобках и адреса в круглых: [Сайт проекта](https://ecalc.ru/). Читатель увидит подпись и сможет перейти по ней. В предпросмотре активны полные адреса HTTP, HTTPS, почтовые ссылки mailto и якоря. Относительные пути остаются текстом: редактор не знает, в какой папке окажется будущий документ.

Короткое имя команды или файла заключают в обратные кавычки: `npm run dev`. Большой фрагмент окружают строками минимум с тремя обратными кавычками. Внутри такого блока звёздочки, решётки и угловые скобки показываются буквально. Это спасает инструкцию, когда нужно объяснить саму разметку, а она упорно превращается в заголовки.

Что можно подготовить в редакторе

Следующие фрагменты решают разные задачи. Их можно набрать в поле и сравнить исходник с результатом: оформление должно помогать прочитать мысль, а не требовать отдельной расшифровки.

Пример 1. README для небольшого проекта. Начните с # Семейный бюджет, добавьте пустую строку, затем описание и раздел ## Запуск. В предпросмотре получится название, обычный абзац и подзаголовок. После скачивания переименуйте файл в README.md: читателю будет проще найти вводную инструкцию рядом с остальными файлами.

Пример 2. Повестка встречи. Введите ## Что обсудить, а ниже три строки: - сроки, - бюджет и - ответственные. Получится список из трёх пунктов. Добавьте **Решение нужно до пятницы** отдельным абзацем. Срок будет выделен, но весь документ не превратится в сплошное жирное пятно.

Пример 3. Инструкция с продолжением нумерации. Запишите 4. Проверить адрес и следующей строкой 5. Подтвердить заказ. Результат начнётся с четвёртого пункта. Это удобно, если первые три шага уже находятся выше, а между частями инструкции нужно вставить пояснение. После правки порядка проверяйте начало каждой отдельной группы.

Пример 4. Ответ на замечание. Введите > Срок поставки слишком большой., оставьте пустую строку и напишите ответ обычным абзацем. Замечание появится в блоке цитаты, ответ останется за его пределами. По оформлению сразу ясно, кто что сказал. Если знак > случайно оставить и перед ответом, оба высказывания визуально сольются.

Пример 5. Команда с опасными для разметки знаками. Поместите строку <button>Купить</button> между двумя строками из трёх обратных кавычек. Предпросмотр покажет код целиком, никакая кнопка не появится. Так можно отправить пример HTML в инструкции. Для редактирования самой веб-разметки пригодится отдельный HTML-редактор.

Пример 6. Записка со ссылкой. Введите Перед отправкой [проверьте длину текста](https://ecalc.ru/characters/).. В результате адрес скроется за понятным действием. Ссылка «проверьте длину текста» помогает лучше, чем «тут»: её смысл сохраняется даже при беглом просмотре документа. Для коротких описаний используйте счётчик символов, потому что знаки разметки тоже занимают место в исходнике.

Почему один файл выглядит по-разному на разных сайтах

CommonMark описывает базовые правила Markdown, но сайты добавляют собственные расширения. Таблицы с вертикальными чертами, зачёркивание, списки задач с галочками и математические формулы могут поддерживаться на одной площадке и оставаться обычным текстом на другой. Этот предпросмотр использует базовый CommonMark без таких расширений.

Поэтому запись - [x] Готово здесь выглядит как пункт со знаками в квадратных скобках, а не как интерактивный флажок. Шрифты, цвета, расстояния между абзацами и ширина строки тоже задаются сайтом. Перед публикацией проверьте документ там, где его будет читать аудитория. Локальный предпросмотр помогает проверить структуру, но не воспроизводит дизайн всех сервисов.

HTML внутри текста не исполняется. Если вставить тег изображения или скрипт, он останется текстом. Изображения, записанные в Markdown через ![подпись](адрес), заменяются подписью в квадратных скобках и не загружаются. Это позволяет просматривать чужой черновик без автоматических обращений к указанным в нём серверам.

Как не потерять черновик

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

Кнопка «Очистить» убирает текст и обновляет сохранённый черновик. Скачанный ранее файл остаётся у вас. Если браузер запретил сохранение или хранилище заполнено, редактор покажет сообщение, а ввод и скачивание продолжат работать. Содержимое документа не включается в адрес страницы: обычная ссылка на редактор не передаёт ваш черновик другому человеку.

Предпросмотр ограничен 50 000 знаками по счётчику JavaScript: некоторые эмодзи занимают в нём две позиции. При превышении лимита исходник не обрезается, его по-прежнему можно скачать целиком. Для сравнения двух редакций используйте сравнение текстов: по различиям проще заметить случайно удалённый абзац или изменённый адрес ссылки.

Вопросы о файлах Markdown

У текстового файла и его оформления разные задачи. Файл хранит символы и структуру, а программа выбирает, как показать их на экране.

Чем открыть файл .md на компьютере?

Любым редактором обычного текста. Расширение .md обозначает Markdown, но содержимое остаётся читаемым без специального конвертера. Для просмотра оформления нужна программа с поддержкой Markdown. В этот редактор можно скопировать содержимое файла.

Почему после вставки из Word пропали цвет и размер букв?

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

Можно ли скачать предпросмотр как HTML?

Здесь скачивается только исходный файл .md. Для публикации в HTML используйте экспорт принимающей программы или преобразование в вашем проекте. Простое переименование document.md в document.html не преобразует разметку.

Как показать три обратные кавычки внутри блока кода?

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

Зачем после кавычек блока пишут название языка?

Запись вроде js или python сообщает программе язык фрагмента. Некоторые редакторы по ней включают подсветку синтаксиса. Здесь код показывается моноширинным шрифтом без цветной подсветки, а указанное название остаётся в скачиваемом исходнике.

Почему локальная картинка не появляется после отправки файла?

Путь вроде images/photo.jpg указывает на отдельный файл. Сам Markdown не содержит его байты, поэтому получателю нужна и картинка в соответствующей папке. Этот предпросмотр вообще не загружает изображения и показывает их подписи; наличие файла проверяйте в целевой программе.

Как сохранить русский текст без кракозябр?

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

Есть что добавить?

Напишите своё мнение, комментарий или предложение.