📝
Редактор Markdown — бесплатно
Пишите и просматривайте Markdown в реальном времени. Поддерживает заголовки, жирный, курсив, блоки кода, таблицы и списки.
Работает офлайн после загрузки
88 слов · 581 символов
Markdown
Превью
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Добро пожаловать в редактор Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Пишите <strong>Markdown</strong> слева, смотрите живой предпросмотр справа.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Возможности</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Жирный</strong>, <em>курсив</em> и <del>зачёркнутый</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Встроенный код</code> и блоки кода</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Ссылки</a></li><li class="my-0.5">Списки, цитаты, таблицы и многое другое</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Пример кода</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown был создан Джоном Грубером в 2004 году, чтобы облегчить написание текстов для веб-сайтов.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Возможность</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Поддерживается</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Заголовки</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Списки</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Таблицы</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Код</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Шпаргалка Markdown
# Heading 1H1
**bold**Жирный
*italic*Курсив
`code`Встроенный код
- itemМаркированный список
1. itemНумерованный список
> quoteЦитата
[text](url)Ссылка
Изображение
---Разделитель
Частые применения
- Напишите документацию API в MarkdownСоставляйте описания конечных точек, примеры запроса/ответа и таблицы параметров в Markdown.
- Делайте заметки в MarkdownПишите структурированные заметки в Markdown, которые можно вставить в Notion, Obsidian, Bear или любое приложение Markdown.
- Напишите README GitHub в MarkdownНабросайте и просмотрите README вашего хранилища GitHub с живой визуализацией Markdown.
- Написание технической документацииНапишите и просмотрите документацию API, вики и технические руководства в Markdown перед публикацией.
- Напишите записи в блоге в MarkdownНапишите записи в блоге в Markdown для Ghost, Jekyll, Hugo, Hashnode и других платформ публикации на основе Markdown.
Как это работает
Предпросмотр отображается написанным вручную парсером Markdown, встроенным прямо в инструмент — без marked, без remark, без внешней библиотеки. Он токенизирует исходный код построчно в браузере, конвертируя синтаксис в HTML, который затем проходит через санитайзер перед отображением.
- 1Построчная токенизацияПользовательская функция renderMarkdown разбивает ваш исходный код на переводы строк и проходит по ним за один проход, сопоставляя огороженные блоки кода, заголовки (H1–H6), цитаты, упорядоченные и неупорядоченные списки, таблицы GFM (с выравниванием столбцов), горизонтальные линии и абзацы в порядке приоритета.
- 2Расширение инлайн-синтаксисаКаждая собранная строка или ячейка затем обрабатывается inlineMarkdown, цепочкой замен регулярных выражений, которая обрабатывает жирный (** и __), курсив (* и _), жирный-курсив (***), зачёркнутый (~~), инлайн-код (), изображения () и ссылки ([text](url)) — изображения разрешаются перед ссылками, так что префикс ! не потребляется неправильно.
- 3Санитизация и блокировка удалённых ресурсовНеобработанный HTML, произведённый рендерером, проходит через санитайзер (sanitize-html) для удаления небезопасных тегов и атрибутов, таких как <script>, обработчики onerror и javascript: hrefs. Второй проход (neutralizeRemote) заменяет значения src удалённых изображений заполнителями по умолчанию, предотвращая тихую отправку предпросмотром запросов на внешние серверы до того, как вы дадите согласие.
- 4Экспорт как .md или самостоятельный .htmlКопирование или скачивание Markdown записывает необработанный исходный текст. Скачивание HTML оборачивает санитизированный вывод в самодостаточный документ с собственной встроенной таблицей стилей — классы Tailwind работают только внутри сайта, так что экспорт вместо этого включает обычные правила CSS, делая файл читаемым где угодно.
Похожие инструменты
Конвертер HTML в Markdown
Конвертируйте HTML в чистый Markdown. Обрабатывает заголовки, списки, ссылки, изображения, блоки кода, таблицы и цитаты. Идеально для переноса контента из CMS.
Попробовать
Конвертер Markdown в HTML
Конвертируйте Markdown в чистый HTML с предпросмотром. Используйте режим источника для копирования готового HTML в блоги, CMS или шаблоны писем.
Попробовать
Редактор диаграмм Mermaid
Создавайте блок-схемы, диаграммы последовательностей, диаграммы Ганта и другие в синтаксисе Mermaid с предпросмотром в реальном времени. Экспорт в SVG или PNG. Работает полностью в браузере.
Попробовать