این ابزار درست کار نمی‌کند؟

دربارهٔ ابزار «ویرایشگر کد HTML آنلاین»

این ابزار یک ویرایشگر HTML مبتنی بر مرورگر با پیش‌نمایش زنده است. HTML، CSS و JavaScript را در پنل‌های ویرایشگر تایپ یا جای‌گذاری کنید، و نتیجه رندر شده فوراً در یک قاب پیش‌نمایش sandbox شده ظاهر می‌شود. تغییرات همانطور که تایپ می‌کنید منعکس می‌شوند.

از آن برای نمونه‌سازی سریع، آموزش مفاهیم front-end، اشتراک‌گذاری بازتولید حداقلی یک باگ، آزمایش قطعه‌های CSS یا JavaScript بدون راه‌اندازی پروژه، یا نمایش قطعه‌های نشانه‌گذاری به دیگران استفاده کنید.

تمام ویرایش‌ها در مرورگر شما اتفاق می‌افتد؛ هیچ‌چیز به سرور ارسال نمی‌شود. کد شما بین بازدیدها در ذخیره‌سازی مرورگر باقی می‌ماند، بنابراین می‌توانید بعداً به یک پیش‌نویس بازگردید بدون از دست دادن کار.

چطور از این ابزار استفاده کنم؟

چطور یک snippet HTML را live-preview کنم؟

  1. HTML را تایپ یا paste کنید

    یک fragment، document کامل یا فقط یک `<div>` را در فیلد «HTML» قرار دهید. `<style>` و `<script>` inline verbatim حفظ می‌شوند — همان‌طور که در browser اجرا می‌شوند در preview هم اجرا می‌شوند.

  2. «اجرا» را بزنید

    خروجی یک فیلد `preview` — خروجی rendered، یا inline یا به‌عنوان URL sandboxed-iframe بسته به platform. برای sanity-check styling، spacing یا اینکه آیا یک element `<details>` همان‌طور که انتظار می‌رفت collapse می‌شود استفاده کنید.

  3. trade-off‌های Sandboxing

    preview code شما را اجرا می‌کند؛ این هدف است. JS hostile که اعتماد ندارید را paste نکنید. اگر snippet شما از `localStorage`، `fetch` یا script‌های CDN third-party استفاده می‌کند، sandbox restriction‌ها ممکن است آن‌ها را block کنند — وقتی به دسترسی کامل network/storage نیاز دارید snippet را در یک فایل local واقعی بگذارید.

  4. ماندگاری نتیجه

    خروجی ephemeral است؛ ابزار CMS نیست. هر snippet کار را به یک فایل در project خود copy back کنید، commit کنید، و این editor را فقط برای آزمایش ad-hoc سریع استفاده کنید.