§

HTML را پیست کنید

§

خام

§

پیش‌نمایش

پیش‌نمایش از طریق DOMPurify پاک‌سازی می‌شود — تگ‌های script، event handler ها و URI های javascript: قبل از رندر حذف می‌شوند.

Markdown زبان مشترک مستندات نرم‌افزاری در جامعه توسعه‌دهندگان ایران است. هر README فارسی در GitHub، هر پاسخ در Stack Overflow، و محتوای پلتفرم‌های آموزشی مانند فرادرس از یک پارسر Markdown عبور می‌کند. تیم‌های فنی ایرانی که بلاگ‌های تکنیکال با Hugo یا Jekyll می‌سازند، مهاجرت محتوا از WordPress به CMS های مدرن را می‌کنند، یا قالب‌های ایمیل transactional می‌نویسند — همه روزانه بین Markdown و HTML جابجا می‌شوند. این ابزار محلی اطمینان می‌دهد پست‌های منتشرنشده، مستندات داخلی و محتوای محرمانه روی دستگاه شما باقی بماند.

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

HTML نشانه‌گذاری رندرشده‌ای است که مرورگر نمایش می‌دهد — <h1>، <ul>، <table>، <a>، و بقیه. Markdown یک فرمت متن ساده سبک‌وزن است که از علائم نگارشی حداقلی (# برای عناوین، * برای تأکید، - برای آیتم‌های لیست) برای نمایش همان ساختار استفاده می‌کند. GitHub Flavored Markdown (GFM) مشخصات اصلی CommonMark را با جداول، خط‌خوردگی، لیست‌های وظیفه و لینک‌های خودکار گسترش می‌دهد. تبدیل HTML به Markdown، HTML رندرشده یا صادرشده را به Markdown متن ساده قابل‌ویرایش برمی‌گرداند — دقیقاً همان چیزی که برای مهاجرت محتوا از یک CMS یا پاکسازی README نیاز است.

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

موتور turndown@7.2.0 همراه‌شده با افزونه turndown-plugin-gfm مجموعه کامل GFM را از HTML شما منتشر می‌کند: عناوین ATX-style از # تا ###### از <h1><h6>، لیست‌های مرتب و نامرتب با تودرتویی، پررنگ **text** و ایتالیک *text*، خط‌خوردگی ~~text~~ از <del>، لینک‌های inline [text](url) و تصاویر ![alt](src)، کدبلاک‌های محصور با راهنمای زبان (```js)، span های کد inline `code`، جداول pipe از <table>، لیست‌های وظیفه GFM - [ ] / - [x] از ورودی‌های checkbox، نقل‌قول‌های بلوکی >، و خطوط افقی ---. پانل پیش‌نمایش Markdown منتشرشده را با marked@12.0.2 دوباره رندر می‌کند تا تبدیل را به صورت بصری تأیید کنید.

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

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

  1. پاک‌سازی: HTML پیست‌شده ابتدا از DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) عبور می‌کند تا عناصر <script>، هر event handler با پیشوند on*، و URI های javascript: قبل از اینکه هر کدی در نشانه‌گذاری قدم بزند حذف شوند. DOMPurify همان پاک‌کننده XSS است که توسط Mozilla MDN، Atlassian، و Microsoft 365 استفاده می‌شود.
  2. تبدیل: turndownService.turndown DOM پاک‌شده را پیمایش می‌کند و GitHub Flavored Markdown منتشر می‌کند — عناوین به پیشوند # تبدیل می‌شوند، لیست‌ها به آیتم‌های - / 1.، <table> به جدول pipe، و به همین ترتیب. Markdown به <textarea> فقط‌خواندنی از طریق value نوشته می‌شود (هرگز innerHTML نه)، بنابراین ذاتاً امن است.
  3. رندر: Markdown منتشرشده توسط marked.parse دوباره تجزیه، یک‌بار دیگر از طریق DOMPurify پاک‌سازی، و به innerHTML پانل پیش‌نمایش اختصاص داده می‌شود تا تأییدیه بصری دریافت کنید که Markdown به ساختار مورد انتظار برمی‌گردد. حالت زنده ورودی را با 150 میلی‌ثانیه debounce می‌کند تا خروجی هنگام پیست‌کردن بدون فشار بر پارسر به‌روز شود.

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

  • حریم خصوصی: هر پاس پاک‌سازی، تبدیل و رندر در مرورگر شما اتفاق می‌افتد. HTML — شامل پست‌های CMS صادرشده، مستندات داخلی، و منبع صفحه محرمانه — هرگز به سرورهای ما نمی‌رسد.
  • ایمن در برابر XSS به طور پیش‌فرض: HTML پیست‌شده قبل از اینکه turndown آن را پیمایش کند از DOMPurify عبور می‌کند، و پانل پیش‌نمایش هر رشته HTML را قبل از innerHTML دوباره از DOMPurify عبور می‌دهد، بنابراین پیست‌کردن نشانه‌گذاری حاوی تگ‌های <script> یا handler های onerror= یک پیش‌نمایش غیرفعال و Markdown تمیز تولید می‌کند.
  • کامل از نظر GFM: عناصر <table> به جداول pipe در Markdown تبدیل می‌شوند، <del> به خط‌خوردگی، و لیست‌های checkbox به لیست‌های وظیفه GFM. اکثر مبدل‌های آنلاین جداول را در مسیر HTML → Markdown می‌اندازند — افزونه turndown-plugin-gfm همراه‌شده آن‌ها را حفظ می‌کند.

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

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

  • مهاجرت CMS: export یک پست WordPress یا Ghost به عنوان HTML و تبدیل به Markdown برای بازسازی سایت استاتیک Hugo / Jekyll / 11ty / Astro. تبدیل سطوح عنوان، لینک‌ها، لیست‌ها، و تأکید inline را حفظ می‌کند.
  • پاکسازی README: پیست‌کردن HTML رندرشده یک صفحه ویکی یا مقاله وب و بازگرداندن آن به Markdown قابل‌ویرایش برای README پروژه یا سایت مستندات، به جای تایپ دوباره ساختار به صورت دستی.
  • آرشیو و یادداشت‌ها: capture کردن یک ایمیل HTML یا web clipping و تبدیل به Markdown برای ذخیره در Obsidian، Notion، یا یک پایگاه دانش متن ساده — Markdown سازگار با diff باقی می‌ماند و از تغییرات فرمت در امان است.

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

پیست‌کردن <h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> Markdown با ## Heading، یک لیست بالت تودرتو، و یک پانل پیش‌نمایش که به همان ساختار تودرتو دوباره رندر می‌شود تولید می‌کند. پیست‌کردن یک <table> با یک ردیف header و دو ردیف داده جدول pipe معادل | col | col | تولید می‌کند — تأیید می‌کند که تبدیل عناوین، لیست‌ها، و جداول را حفظ می‌کند.

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

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

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

بله. HTML پیست‌شده از DOMPurify.sanitize عبور می‌کند قبل از اینکه turndown آن را پیمایش کند، و هر رشته 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:، و عبارات CSS خطرناک‌شناخته را حذف می‌کند. پیست‌کردن <img src=x onerror=alert(1)> پیش‌نمایشی تولید می‌کند که document.querySelector('#output-preview img[onerror]') null برمی‌گرداند و هیچ alert ای نمی‌زند.

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

بله. جهت HTML → Markdown از turndown-plugin-gfm استفاده می‌کند که یک قانون turndown سفارشی اضافه می‌کند که گره‌های <table> را پیمایش می‌کند و Markdown جدول pipe معادل را منتشر می‌کند — یک ردیف header، یک ردیف تراز‌بندی |---|---|، سپس ردیف‌های داده. اکثر مبدل‌های آنلاین جداول را در این مسیر می‌اندازند — این یکی آن‌ها را حفظ می‌کند. خط‌خوردگی (<del>text</del>~~text~~) و لیست‌های وظیفه (<input type="checkbox">- [ ] / - [x]) به همان روش تبدیل می‌شوند.

آیا HTML من به صورت تمیز تبدیل خواهد شد؟

برای مجموعه ویژگی‌های GFM کانونیک — عناوین h1 تا h6، لیست‌های مرتب و نامرتب با تودرتویی، پررنگ / ایتالیک / خط‌خوردگی، لینک‌های inline، تصاویر inline، کدبلاک‌های محصور با تگ‌های زبان، span های کد inline، جداول pipe، لیست‌های وظیفه، نقل‌قول‌های بلوکی، خطوط افقی، و لینک‌های خودکار — تبدیل تمیز و قابل پیش‌بینی است. موارد لبه‌ای: کامنت‌های HTML (<!-- ... -->) حذف می‌شوند (Markdown سینتکس کامنت ندارد)؛ styling inline و class attributes حذف می‌شوند زیرا Markdown معادلی ندارد؛ و تگ‌های inline غیرمعمول مانند <sub> / <sup> به متن ساده تبدیل می‌شوند. اینها رفتارهای مستندشده turndown هستند، نه bug.

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

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

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