📝
Редактор Markdown — безкоштовно
Пишіть і переглядайте Markdown у реальному часі. Підтримує заголовки, жирний, курсив, блоки коду, таблиці та списки.
Працює офлайн після завантаження
89 слів · 576 символів
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.
- Напишіть GitHub README у 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:. Другий прохід (neutralizeRemote) за замовчуванням замінює src віддалених зображень заповнювачами, щоб перегляд не звертався мовчки до зовнішніх серверів, доки ви цього не дозволите.
- 4Експорт у .md або автономний .htmlКопіювання чи завантаження Markdown записує сирий текст. Завантаження HTML обгортає санітизований результат в автономний документ із власною вбудованою таблицею стилів — класи Tailwind працюють лише всередині сайту, тож експорт містить прості правила CSS, і файл читається будь-де.
Схожі інструменти
Конвертер HTML у Markdown
Конвертуйте HTML у чистий Markdown. Обробляє заголовки, списки, посилання, зображення, блоки коду, таблиці та цитати. Ідеально для перенесення вмісту з CMS.
Спробувати
Конвертер Markdown у HTML
Конвертуйте Markdown у чистий HTML із живим попереднім переглядом. Використовуйте вихідний вигляд для копіювання готового HTML для блогів, CMS або шаблонів електронної пошти.
Спробувати
Редактор діаграм Mermaid
Створюйте блок-схеми, діаграми послідовності, діаграми Ганта та інше у синтаксисі Mermaid із живим попереднім переглядом. Експортуйте як SVG або PNG. Повністю у вашому браузері.
Спробувати