سورس کد و اسکریپت «ویرایشگر کد تحت مرورگر» با استفاده از HTML، CSS و JavaScript

سورس کد و اسکریپت «ویرایشگر کد تحت مرورگر» با استفاده از HTML، CSS و JavaScript

پروژه‌ای که در سایت SourceCodester منتشر شده، یک ویرایشگر کد (Code Editor) ساده و کارآمد است که کاملاً با HTML، CSS و JavaScript ساخته شده و در داخل مرورگر اجرا می‌شود. این ویرایشگر به کاربران امکان می‌دهد تا به‌صورت زنده کدهای HTML، CSS و JavaScript را بنویسند و نتیجه آن را در همان صفحه مشاهده کنند.

به ویرایشگر کد مبتنی بر مرورگر، طراحی شده برای توسعه وب مدرن خوش آمدید! این ابزار سبک اما قدرتمند که کاملاً با HTML، CSS و جاوا اسکریپت ساخته شده است ، به شما امکان می‌دهد کد را مستقیماً در مرورگر خود بنویسید، آزمایش کنید و اشکال‌زدایی کنید. چه یک مبتدی باشید که اصول اولیه را یاد می‌گیرد و چه یک توسعه‌دهنده باتجربه که در حال نمونه‌سازی اولیه ایده‌ها است، این برنامه یک رابط کاربری بصری با هایلایت کردن سینتکس، ویرایش چند فایلی و پیش‌نمایش‌های زنده ارائه می‌دهد - همه اینها بدون نیاز به نصب یا تنظیمات پیچیده.

سادگی را با کارایی ترکیب می‌کند و ویژگی‌هایی مانند کنسول داخلی، تغییر تم تاریک/روشن و میانبرهای صفحه‌کلید را برای ساده‌سازی گردش کار شما ارائه می‌دهد. این برنامه که توسط Ace Editor پشتیبانی می‌شود ، با تکمیل خودکار و تشخیص خطا، یک تجربه کدنویسی روان را ارائه می‌دهد. فقط ویرایشگر را در هر مرورگری باز کنید، کدنویسی را شروع کنید و نتایج فوری را ببینید - بدون سرور، بدون دانلود، فقط آزادی کامل در کدنویسی. آماده‌اید تا ایده‌های خود را به واقعیت تبدیل کنید؟ شروع کنید و توسعه وب بدون دردسر را تجربه کنید!

ویژگی‌های کلیدی:

• ✅ پشتیبانی از چند فایل - ویرایش فایل‌های HTML، CSS و جاوا اسکریپت در تب‌های جداگانه.
• ✅ برجسته‌سازی سینتکس - ارائه شده توسط Ace Editor برای خوانایی بهتر.
• ✅ پیش‌نمایش زنده - مشاهده فوری تغییرات HTML/CSS/JS در پنل پیش‌نمایش.
• ✅ خروجی کنسول - اشکال‌زدایی جاوا اسکریپت با یک کنسول داخلی.
• ✅ تم تیره/روشن - جابجایی بین تم‌ها برای کدنویسی راحت.
• ✅ طراحی واکنش‌گرا - هم روی دسکتاپ و هم روی دستگاه‌های موبایل کار می‌کند.
• ✅ میانبرهای صفحه‌کلید - ذخیره سریع فایل‌ها با Ctrl+S (Cmd+S در مک).
• ✅ مدیریت فایل - ایجاد، ذخیره و بستن آسان فایل‌ها.

فناوری‌های مورد استفاده:

• 🛠 HTML5 و CSS3 – برای ساختاردهی و استایل‌دهی رابط ویرایشگر.
• 🛠 جاوااسکریپت (ES6) – برای عملکرد پویا و مدیریت فایل‌ها.
• 🛠 Ace Editor – یک ویرایشگر کد با کارایی بالا برای هایلایت کردن سینتکس و تکمیل خودکار.
• 🛠 Font Awesome – برای آیکون‌ها (انواع فایل، دکمه‌ها و غیره).

نحوه استفاده:

• باز کردن فایل‌ها - برای ویرایش یک فایل، روی آن در نوار کناری کلیک کنید.
• ویرایش کد - نوشتن HTML، CSS یا جاوا اسکریپت در ویرایشگر.
• اجرای کد - برای اجرای JS یا پیش‌نمایش HTML، روی دکمه ▶ Run کلیک کنید.
• تغییر زبانه‌ها - برای دیدن خروجی‌ها از زبانه‌های Console و Preview استفاده کنید.
• ذخیره فایل‌ها – برای ذخیره تغییرات، 💾 ذخیره یا Ctrl+S را فشار دهید.
• فایل‌های جدید – برای ایجاد فایل‌های بیشتر، روی 📄 جدید کلیک کنید.
• تغییر تم - از حالت خورشید/ماه برای حالت تاریک/روشن استفاده کنید.

🎯 ویژگی‌های اصلی پروژه:

• طراحی ساده و کاربرپسند

• پشتیبانی از ویرایش هم‌زمان کدهای HTML، CSS و JavaScript

• نمایش زنده نتیجه (Live Preview) در پنجره‌ای جداگانه در همان صفحه

• بدون نیاز به نصب افزونه یا نرم‌افزار جانبی (کاملاً تحت مرورگر)

• مناسب برای آموزش، تست سریع کد و ساخت ابزارهای فرانت‌اند

🛠 زبان‌های برنامه‌نویسی استفاده‌شده:

• HTML برای ساختار صفحه

• CSS برای طراحی و استایل‌دهی

• JavaScript برای عملکرد پویا و تعامل با کاربر

📦 ساختار پروژه:

• یک بخش برای وارد کردن کد HTML

• یک بخش برای CSS

• یک بخش برای JavaScript

• یک پنجره نمایش (iframe) برای مشاهده نتیجه اجرای کدها

برای شما کاربران عزیز یشنهاد دانلود داده می شود.