Үндсэн агуулга руу очих
LibraTool logoLibraTool

Markdown редактор — үнэгүй

Markdown-г бодит цагт бичиж урьдчилан харах. Гарчиг, тод, налуу, кодын блок, хүснэгт, жагсаалтыг дэмждэг.

Ачаалагдсаны дараа офлайн ажилладаг
89 үг · 550 тэмдэгт
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> бичиж, баруун талд live preview харна уу.</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">Inline код</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)Холбоос
![alt](url)Зураг
---Хуваагч

Түгээмэл хэрэглээ

  • Markdown-аар API баримтийг эсвэл бичихМарdowns-аар маршрута тэмдэглэл, хүсэлт/хариулт, параметрын хүснэгтүүдийг теориа.
  • Markdown тэмдэглэл бичихNotion, Obsidian, Bear эсвэл бусад Markdown програмд буулгаж болох бүтцэтэй Markdown тэмдэглэл бичээрэй.
  • GitHub README-г Markdown хэлээр цэцэгGitHub сандалын README нь амьд Markdown тогтоолоос ирүүлэхийн эхийн үгүй нөхцөл ба дүрүүлэлтийг сахуулах.
  • Техникийн баримтжуулалтыг бүтээхAPI баримтжуулалт, вики болон техникийн гайдыг Markdown дээр сахуулалт болон нийтлэлийн өмнөх харлах.
  • Markdown дээр блогийн нөхцөл бүтээхGhost, Jekyll, Hugo, Hashnode болон Markdown-ын харьцаа үнэлэх сайтуудын туурвилсан блогийн нөхцөл сахуулах.

Хэрхэн ажилладаг

Урьдчилан харах нь хэрэгсэлд шууд суулгасан гараар бичсэн Markdown задлагчаар зурагдана — marked, remark, гадаад номын сан хамааралгүй. Энэ нь эх сурвалжийг хөтчид мөр-мөрөөр tokenize хийж, синтаксыг HTML руу хувиргаж, дараа нь харагдахаас өмнө sanitizer-ээр дамжуулдаг.

  1. 1
    Мөр-тутмын tokenization
    Захиалгат renderMarkdown функц таны эх сурвалжийг шинэ мөрөөр хуваагаад нэг дамжлагаар гүйж, fenced код блок, толгой хэсэг (H1–H6), quote, дараалсан, дараалалгүй жагсаалт, GFM хүснэгт (баганын эгнэлттэй), хэвтээ шугам, догол мөрийг ач холбогдлын дарааллаар тохируулдаг.
  2. 2
    Inline синтакс өргөтгөл
    Цугласан мөр эсвэл нүд бүр дараа нь inlineMarkdown-аар боловсруулагдана, энэ нь тод (** ба __), налуу (* ба _), тод-налуу (***), зурсан (~~), inline код, зураг (![alt](url)), холбоос ([text](url))-г боловсруулдаг regex орлуулгын гинж — зураг холбоосоос өмнө шийдэгддэг тул ! угтвар буруу хэрэглэгддэггүй.
  3. 3
    Sanitization, алсын нөөцийг хаах
    Зурлагаараас гарсан түүхий HTML <script>, onerror гарын авагч, javascript: hrefs зэрэг аюулгүй бус tag, шинж чанарыг арилгахын тулд sanitizer (sanitize-html)-ээр дамждаг. Хоёр дахь дамжлага (neutralizeRemote) алсын зургийн src утгыг үндсэнд placeholder-ээр сольдог, урьдчилан харах таны зөвшөөрөлгүйгээр гадаад серверт чимээгүй холбогдохоос сэргийлдэг.
  4. 4
    Экспорт .md эсвэл бие даасан .html болгон
    Markdown хуулах эсвэл татах нь түүхий эх текстийг бичдэг. HTML татах нь sanitized гаралтыг өөрийн inline stylesheet-тэй бие даасан баримт бичигт боолдог — Tailwind класс зөвхөн сайт дотор ажилладаг тул экспорт оронд нь энгийн CSS дүрэм холбодог, файлыг хаана ч уншигдахуйц болгодог.

Холбоотой хэрэгслүүд

📝

HTML-г Markdown болгох хөрвүүлэгч

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

Туршиж үзэх
🔄

Markdown-г HTML болгох хөрвүүлэгч

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

Туршиж үзэх
📊

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

Mermaid синтакс дээр урсгал диаграм, дарааллын диаграм, Ганттын диаграм болон бусдыг шууд урьдчилан харалттайгаар бичих. SVG эсвэл PNG хэлбэрээр экспортлох. Бүхэлдээ хөтчид ажилладаг.

Туршиж үзэх

Түгээмэл асуултууд