📝
Markdown редактор — тегін
Markdown-ды нақты уақытта жазыңыз және алдын ала қараңыз. Тақырыптарды, қоюды, курсивті, код блоктарын, кестелерді және тізімдерді қолдайды.
Жүктелгеннен кейін офлайн жұмыс істейді
90 сөз · 596 таңба
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 жылы John Gruber ұйғарына веб-сайтқа жазуды жеңілдету үшін құрылды.</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)Сілтеме
Сурет
---Бөлгіш
Жиі қолданылуы
- Markdown-та API Құжаттарын ЖазыңызҰзын нүкте сипаттамалары, сауалдану/жауап мысалдар және параметр кестелерін markdown-та жазыңыз.
- Markdown Түсініктемелерін БілдіріңізNotion, Obsidian, Bear немесе кез келген Markdown қолданбасына құйса болатын құрылымы берілген түсініктемелерін markdown-та жазыңыз.
- GitHub README деген Markdown-та жазGitHub репозиториясының README деген файлын тірі Markdown визуализациясы арқылы жүргіз және қарап шық.
- Техникалық құжаттамаларын жазAPI құжаттарын, вики-лерін және техникалық нұсқамаларын Markdown-та жаз және жариялау алдында қарап шық.
- Блог постарын Markdown-та жазGhost, Jekyll, Hugo, Hashnode және басқа Markdown-негіздегі жарияла платформалары үшін блог постарын жүргіт.
Қалай жұмыс істейді
Алдын ала қарау құралға тікелей енгізілген қолмен жазылған Markdown талдағышы арқылы өңделеді — marked жоқ, remark жоқ, сыртқы кітапхана жоқ. Ол көзді браузерде жол-бойынша токенайздайды, синтаксисті көрсетілместен бұрын тазартушыдан өтетін HTML-ге түрлендіреді.
- 1Жол-бойынша токенизацияТаңдаулы renderMarkdown функциясы көзіңізді жаңа жолдарда бөледі және оларды бір өтуде аралайды, қоршалған код блоктарын, тақырыптарды (H1–H6), дәйексөз блоктарын, реттелген және реттелмеген тізімдерді, GFM кестелерін (баған-туралауымен), көлденең сызықтарды және абзацтарды артықшылық ретімен сәйкестендіреді.
- 2Инлайн синтаксисті кеңейтуЖиналған әр жол немесе ұяшық содан кейін қалың (** және __), курсив (* және _), қалың-курсив (***), сызылған (~~), инлайн код (), кескіндер () және сілтемелерді (тексt) (url)) өңдейтін регекс алмастырулары тізбегі inlineMarkdown арқылы өңделеді — кескіндер сілтемелерден бұрын шешіледі, сондықтан ! префиксі дұрыс емес түсінілмейді.
- 3Тазарту және қашықтағы-ресурсты бұғаттауӨңдеуші шығарған шикі HTML <script>, onerror өңдеушілері және javascript: hrefs сияқты қауіпсіз емес тегтер мен атрибуттарды алып тастау үшін тазартушыдан (sanitize-html) өтеді. Екінші өту (neutralizeRemote) әдепкі бойынша қашықтағы кескін src мәндерін орынбасарлармен алмастырады, алдын ала қараудың сіз қосылмас бұрын сыртқы серверлерге үнсіз хабарласуын болдырмайды.
- 4.md немесе жеке-тұрған .html ретінде экспорттауMarkdown-ды көшіру немесе жүктеп алу шикі көз мәтінін жазады. HTML жүктеп алу тазартылған шығысты өз инлайн стиль парағы бар жеке-тұрған құжатқа орайды — Tailwind кластары тек сайт ішінде жұмыс істейді, сондықтан экспорт оның орнына жай CSS ережелерін жинайды, файлды кез келген жерде оқылатын етеді.
Байланысты құралдар
HTML-ды Markdown конвертері
HTML-ды таза Markdown-ға айналдырыңыз. Тақырыптарды, тізімдерді, сілтемелерді, кескіндерді, код блоктарын, кестелерді және блок дәйексөздерді өңдейді. CMS-тен мазмұн шығару үшін тамаша.
Байқап көріңіз
Markdown-ды HTML конвертері
Markdown-ды тірі алдын ала қараумен таза HTML-ға айналдырыңыз. Блогтар, CMS немесе электрондық пошта үлгілеріне дайын HTML-ды көшіру үшін бастапқы код көрінісін пайдаланыңыз.
Байқап көріңіз
Mermaid диаграмма редакторы
Тірі алдын ала қараумен Mermaid синтаксисінде ағындық диаграммалар, реттілік диаграммалары, Gantt кестелері және т.б. жазыңыз. SVG немесе PNG ретінде экспорттаңыз. Толығымен браузерде жұмыс істейді.
Байқап көріңіз