مبدل Markdown به HTML — تبدیل Markdown به HTML آنلاین _

تبدیل Markdown به HTML چیست؟

Markdown یک فرمت متن ساده سبک‌وزن است که از علائم نگارشی حداقلی (# برای عناوین، * برای تأکید، - برای آیتم‌های لیست) برای کدگذاری نثر ساختاریافته استفاده می‌کند. GitHub Flavored Markdown (GFM) مشخصات اصلی CommonMark را با جداول، خط‌خوردگی، لیست‌های وظیفه و لینک‌های خودکار گسترش می‌دهد. HTML فرم رندرشده‌ای است که مرورگر نمایش می‌دهد. تبدیل Markdown به HTML به شما امکان می‌دهد در سینتکس سبک‌وزن بنویسید و بدون نوشتن دستی تگ‌ها به یک سطح رندرشده ارسال کنید.

کدام ویژگی‌های GitHub Flavored Markdown پشتیبانی می‌شوند؟

پارسر marked@12.0.2 همراه‌شده از مجموعه کامل GFM پشتیبانی می‌کند: عناوین ATX-style از # تا ######، لیست‌های مرتب و نامرتب با تودرتویی، پررنگ **text** و ایتالیک *text*، خط‌خوردگی ~~text~~، لینک‌های inline [text](url) و تصاویر inline ![alt](src)، کدبلاک‌های محصور با تگ‌های زبان اختیاری (```js)، span های کد inline `code`، جداول pipe با ردیف‌های header، لیست‌های وظیفه GFM - [ ] / - [x]، نقل‌قول‌های بلوکی >، خطوط افقی --- و لینک‌های خودکار. هر کدام در پانل پیش‌نمایش دقیقاً همانطور رندر می‌شوند که GitHub رندر می‌کند.

تبدیل Markdown به HTML چگونه کار می‌کند؟

هر تبدیل به صورت محلی در مرورگر شما با استفاده از دو کتابخانه همراه‌شده اجرا می‌شود — بدون CDN، بدون fetch، بدون telemetry. مراحل سطح بالا:

1. تجزیه: marked.parse(source) Markdown شما را می‌خواند و یک رشته HTML تولید می‌کند. پارسر در حالت GFM اجرا می‌شود، بنابراین جداول، لیست‌های وظیفه، خط‌خوردگی و لینک‌های خودکار همه شناسایی می‌شوند.
2. پاک‌سازی: خروجی HTML قبل از اینکه به innerHTML اختصاص داده شود از DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) عبور می‌کند. DOMPurify همان پاک‌کننده XSS است که توسط Mozilla MDN، Atlassian و Microsoft 365 استفاده می‌شود — HTML را تجزیه می‌کند، DOM را پیمایش می‌کند و عناصر <script>، هر ویژگی event handler به شکل on* و طرح‌های URI به شکل javascript: را حذف می‌کند.
3. رندر: HTML پاک‌شده از طریق innerHTML به پانل پیش‌نمایش نوشته می‌شود، و HTML خام در پانل دوم از طریق یک <textarea> فقط خواندنی نمایش داده می‌شود تا بتوانید markup را کپی کنید. حالت زنده ورودی را با ۱۵۰ میلی‌ثانیه debounce می‌کند تا پیش‌نمایش هنگام تایپ بدون فشار بر پارسر به‌روز شود.

چرا Markdown را با این ابزار به HTML تبدیل کنیم؟

• حریم خصوصی: هر پاس تجزیه، پاک‌سازی و رندر در مرورگر شما اتفاق می‌افتد. Markdown — شامل پست‌های بلاگ منتشرنشده، پیش‌نویس‌های مستندات داخلی و محتوای محرمانه README — هرگز به سرورهای ما نمی‌رسد.
• ایمن در برابر XSS به طور پیش‌فرض: پانل پیش‌نمایش رندرشده هر رشته HTML را از DOMPurify قبل از innerHTML عبور می‌دهد، بنابراین تگ‌های <script> یا handler های onerror= خام در Markdown شما یک پیش‌نمایش غیرفعال تولید می‌کنند. پانل خام رشته unsanitized را برای بازرسی نمایش می‌دهد اما داخل یک <textarea> فقط خواندنی از طریق value قرار دارد — هرگز اجرا نمی‌شود.
• کامل از نظر GFM: جداول، خط‌خوردگی، لیست‌های وظیفه و لینک‌های خودکار دقیقاً همانطور رندر می‌شوند که GitHub رندر می‌کند. یک pipe table در Markdown به یک <table> با <thead> و <tbody> تبدیل می‌شود — بدون ردیف‌های از دست رفته، بدون ساختار مسطح.

کاربردهای رایج تبدیل Markdown به HTML چیست؟

تبدیل Markdown به HTML در مستندات، کار روی سایت‌های استاتیک و نوشتن ایمیل ظاهر می‌شود:

• نوشتن README برای GitHub: پیش‌نویس یک README پروژه به صورت محلی در Markdown و پیش‌نمایش HTML رندرشده قبل از push. پیش‌نمایش با رندرر GFM GitHub برای جداول، لیست‌های وظیفه و کدبلاک‌های محصور مطابقت دارد.
• محتوای سایت استاتیک: paste یک پست Markdown و دریافت HTML برای یک فیلد CMS یا موتور قالب‌بندی که markup را به جای Markdown source انتظار دارد.
• قالب‌های ایمیل: نوشتن متن ایمیل transactional به عنوان Markdown و تبدیل به HTML برای موتور قالب‌بندی ارائه‌دهنده سرویس ایمیل. خروجی HTML معنایی ساده است — بدون استایل‌های inline، بدون ناهنجاری‌های email-client.

یک مثال تبدیل Markdown به HTML چه شکلی است؟

پیست کردن # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) یک پانل پیش‌نمایش حاوی <h1>Title</h1>، یک لیست نامرتب دو آیتمی و یک <a href="https://example.com">link</a> تولید می‌کند. پانل خام رشته HTML دقیق را نمایش می‌دهد تا بتوانید آن را مستقیماً در یک قالب کپی کنید. یک pipe table با ردیف تراز‌بندی |---|---| به یک <table> کامل با <thead> و <tbody> تبدیل می‌شود — تأیید می‌کند که جداول GFM دقیقاً همانطور که GitHub رندر می‌کند رندر می‌شوند.

آیا این مبدل Markdown به HTML کاملاً در مرورگر من اجرا می‌شود؟

بله. هر پاس تجزیه، پاک‌سازی و رندر به صورت محلی به عنوان JavaScript داخل تب مرورگر شما اجرا می‌شود. کتابخانه‌های همراه‌شده — marked@12.0.2 و DOMPurify@3.1.7 — از همان مبدأ صفحه ارسال می‌شوند، بنابراین هیچ وابستگی CDN، هیچ fetch، هیچ XMLHttpRequest، هیچ navigator.sendBeacon روی ورودی وجود ندارد. ابزار همچنین وقتی صفحه بارگذاری شد به صورت آفلاین کار می‌کند. پست‌های منتشرنشده، مستندات داخلی و README های محرمانه روی دستگاه شما باقی می‌مانند.

آیا پانل پیش‌نمایش رندرشده در برابر XSS ایمن است؟

بله. هر رشته HTML که به innerHTML اختصاص داده می‌شود ابتدا از DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) عبور می‌کند. DOMPurify پاک‌کننده XSS open-source است که توسط Cure53 نگهداری می‌شود؛ همان کتابخانه‌ای است که توسط Mozilla MDN، Atlassian و Microsoft 365 برای سخت‌سازی HTML ارائه‌شده توسط کاربر استفاده می‌شود. پروفایل پیش‌فرض html عناصر <script>، هر ویژگی event handler به شکل on* (onerror، onclick، و غیره)، طرح‌های URI javascript: داخل href / src و عبارات CSS خطرناک‌شناخته را حذف می‌کند.

آیا جداول GFM پشتیبانی می‌شوند؟

بله. جهت Markdown → HTML جداول pipe را به صورت بومی از طریق حالت GFM در marked مدیریت می‌کند — یک ردیف header جداشده با یک ردیف تراز‌بندی |---|---|، به دنبال ردیف‌های داده، یک <table> با <thead> + <tbody> تولید می‌کند. Strikethrough (~~text~~ → <del>text</del>) و لیست‌های وظیفه (- [ ] / - [x] → <input type="checkbox">) دقیقاً همانطور که GitHub رندر می‌کند رندر می‌شوند.

آیا Markdown من به درستی تبدیل خواهد شد؟

برای مجموعه ویژگی‌های GFM کانونیک — عناوین h1 تا h6، لیست‌های مرتب و نامرتب با تودرتویی، پررنگ / ایتالیک / خط‌خوردگی، لینک‌های inline، تصاویر inline، کدبلاک‌های محصور با تگ‌های زبان، span های کد inline، جداول pipe، لیست‌های وظیفه، نقل‌قول‌های بلوکی، خطوط افقی و لینک‌های خودکار — خروجی HTML پایدار است و با رندرر GitHub مطابقت دارد. چند رفتار قابل توجه: HTML inline خام داخل Markdown (مانند <sub>text</sub>) بدون تغییر به خروجی می‌رسد، و عناوین CommonMark setext (=== زیرخطوط) و ATX (# Title) هر دو همان <h1> را تولید می‌کنند. اینها رفتارهای مستند marked هستند، نه اشکالات. اگر جهت مخالف را نیاز دارید، از ابزار HTML به Markdown استفاده کنید.

آیا syntax highlighting در کدبلاک‌های محصور پشتیبانی می‌شود؟

در نسخه v1 نه. کدبلاک‌های محصور با فونت monospaced و یک پس‌زمینه ظریف رندر می‌شوند اما بدون هایلایت توکن هر زبان. افزودن syntax highlighting نیاز به bundle کردن Prism یا highlight.js دارد که هر کدام ۱۵ تا ۴۰ کیلوبایت به علاوه یک فایل دستور زبان هر زبان اضافه می‌کنند. در حال حاضر رندرر بر صحت و ایمنی XSS تمرکز دارد؛ اگر تقاضای کاربر برای هایلایت inline وجود داشت، یک تاگل opt-in یک پیگیری قابل‌انجام است.

این مبدل Markdown به HTML با marked@12.0.2 و DOMPurify@3.1.7 بسته‌شده در همان مبدأ ارسال می‌شود، از مجموعه ویژگی‌های کامل GFM پشتیبانی می‌کند، و هر رشته HTML رندرشده را قبل از لمس DOM پاک‌سازی می‌کند. بدون آپلود، بدون CDN، بدون telemetry — هر بایت در مرورگر شما باقی می‌ماند.