LibraTool logoLibraTool

Акысыз Markdown редактору

Markdown жазыңыз жана реалдуу убакытта алдын ала көрүңүз. Аталыштарды, коюуну, курсивди, код блокторун, таблицаларды жана тизмелерди колдойт.

Жүктөлгөндөн кийин оффлайн иштейт
88 сөз · 593 белги
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)Шилтеме
![alt](url)Сүрөт
---Бөлүүчү сызык

Бул кантип иштейт

Алдын ала көрүү куралга түз курулган кол менен жазылган Markdown талдагыч тарабынан тартылат — marked жок, remark жок, тышкы китепкана жок. Ал булакты браузерде сап-боюнча-сап токенделет, синтаксисти көрсөтүлгөнгө чейин тазалагычтан өткөн HTMLге айландырат.

  1. 1
    Сап-боюнча-сап токенизация
    Ыңгайлаштырылган renderMarkdown функциясы булагыңызды жаңы саптар боюнча бөлөт жана аларды бир өтүштө басып өтүп, курчалган код блоктору, аталыштар (H1–H6), цитата блоктору, тартипсиз жана тартипсиз тизмелер, GFM таблицалары (мамыча-теңдештирүү менен), горизонталдык сызыктар жана абзацтарды артыкчылык тартиби боюнча дал келтирет.
  2. 2
    Ички синтаксис кеңейтүү
    Чогултулган ар бир сап же клетка андан кийин калың (** жана __), курсив (* жана _), калың-курсив (***), сызылган (~~), ички код () , сүрөттөр (![alt](url)) жана шилтемелерди ([text](url)) иштеткен регекс алмаштыруу чынжыры болгон inlineMarkdown менен иштетилет — сүрөттөр шилтемелерден мурун чечилет, ошондуктан ! префикси туура эмес кабыл алынбайт.
  3. 3
    Тазалоо жана алыскы-ресурс бөгөттөө
    Тартуучу тарабынан жаралган чийки HTML коопсуз эмес тегдерди жана атрибуттарды (<script>, onerror иштеткичтери жана javascript: hrefтерди) алуу үчүн тазалагычтан (sanitize-html) өткөрүлөт. Экинчи өтүш (neutralizeRemote) алыскы сүрөт src маанилерин демейки боюнча запастыктар менен алмаштырат, алдын ала көрүүнүн уруксат бербегенче тышкы серверлерге унчукпай телефон чалышынан алдын алуу.
  4. 4
    .md же өз алдынча .html катары экспорттоо
    Markdown көчүрүү же жүктөп алуу чийки булак текстти жазат. HTML жүктөп алуу тазаланган чыгууну өз ички стиль баракчасы менен өз алдынча документке орайт — Tailwind класстары жалгыз сайттын ичинде иштейт, ошондуктан экспорт анын ордуна жөнөкөй CSS эрежелерин топтойт, файлды каалаган жерде окулуучу кылат.

Байланыштуу куралдар

📝

HTML-Markdown конверттегич

HTML-ди таза Markdown-го конверттеңиз. Аталыштарды, тизмелерди, шилтемелерди, сүрөттөрдү, код блокторун жана таблицаларды иштетет. CMS-тен мазмунду чыгаруу үчүн эң ылайыктуу.

Байкап көрүңүз
🔄

Markdown-HTML конверттегич

Markdown-ду түз алдын ала көрүү менен таза HTML-ге конверттеңиз. Блогдор, CMS-тер же email үлгүлөрү үчүн даяр HTML-ди көчүрүп алуу үчүн булак көрүнүшүн колдонуңуз.

Байкап көрүңүз
📊

Mermaid диаграмма редактору

Аккыстарды, ырааттуулук диаграммаларын, Gantt диаграммаларын жана башкаларды Mermaid синтаксисинде түз алдын ала көрүү менен жазыңыз. SVG же PNG катары экспорттоңуз. Толугу менен браузериңизде иштейт.

Байкап көрүңүз

Көп берилүүчү суроолор