📝
Рэдактар Markdown — бясплатна
Пішыце і прагляджвайце Markdown у рэальным часе. Падтрымлівае загалоўкі, тоўсты шрыфт, курсіў, блокі кода, табліцы і спісы.
Працуе афлайн пасля загрузкі
88 слоў · 553 сімв.
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Падрыхтуйце і папярэдліце ваш GitHub рэпазіторыум README з трансляцыяй 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. Працуе цалкам у вашым браўзеры.
Паспрабуйце