LibraTool logoLibraTool

دەستکاریکەری Markdownی بەخۆڕایی

Markdown بنووسە و بە کاتی ڕاستەقینەدا پێشبینین بکە. سەرپەڕ، تۆخ، لار، بەشی کۆد، خشتە، و لیست پشتگیری دەکات.

بەبێ ئینتەرنێت کاردەکات دوای بارکردن
91 وشە · 571 پیت
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 لەلایەن جۆن گروبەرەوە لە ساڵی ٢٠٠٤ دروستکرا بۆ ئاسانکردنی نووسین بۆ وێب.</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
    فراوانکردنی دەقنووسینی ناوخۆیی
    هەر هێڵ یان خانەیەکی کۆکراو پاشان لەلایەن inlineMarkdownەوە پرۆسێس دەکرێت، زنجیرەیەک جێگۆڕکێی ڕێجێکس کە مامەڵە لەگەڵ ڕەق (** و __)، لار (* و _)، ڕەق-لار (***)، هێڵبڕاو (~~)، کۆدی ناوخۆیی، وێنە (![alt](url))، و لینک ([text](url)) دەکات — وێنە پێش لینک چارەسەر دەکرێن بۆیە پێشگری ! بەهەڵە هەڵناگیرێت.
  3. 3
    سەلامەتکردن و بلۆککردنی سەرچاوەی دوورەکار
    HTMLی خاوی دروستکراو لەلایەن نیگاردەرەوە بەسەر پاکژکەرێکدا دەردەچێت (sanitize-html) بۆ لادانی تاگ و تایبەتمەندی نائاسایی وەک <script>، کۆنترۆڵکەری onerror، و href هایی javascript:. تێپەڕی دووەم (neutralizeRemote) نرخی src ی وێنەی دوورەکار بەبنەڕەت بە جێگرەوە دەگۆڕێتەوە، ڕێگری دەکات لە پێشبینینەکە بەبێدەنگی پەیوەندی بکات لەگەڵ سێرڤەری دەرەکیدا پێش ڕازیبوونت.
  4. 4
    دەرهێنان وەک .md یان HTMLی سەربەخۆ
    کۆپیکردن یان داگرتنی Markdown دەقی سەرچاوەیی خاو دەنووسێت. داگرتنی HTML دەرچوونی پاکژکراو دەپێچێتەوە لەناو بەڵگەنامەیەکی سەربەخۆدا لەگەڵ ستایلشیتی ناوخۆیی خۆی — کلاسی Tailwind تەنها لەناو ماڵپەڕەکەدا کاردەکات، بۆیە دەرهێنانەکە یاسای CSSی سادە بۆ جێگرەوە کۆدەکاتەوە، فایلەکە لە هەر شوێنێک خوێندراو دەکات.

ئامرازە پەیوەندیدارەکان

پرسیارە باوەکان