اجرا سریع Ctrl + S ، تکمیل خودکار Ctrl + Space
این صفحه توسط سرویس لینکی و با طراحی و اجرای مصطفی ارادی ایجاد شده است. ادیتور این پروژه بر اساس کتابخانههای متنباز مایکروسافت و تحت مجوز MIT توسعه یافته است. استفاده از آن رایگان و آزاد است.
ادیتور کد آنلاین حرفهای – ویرایشگر پیشرفته HTML، CSS و JavaScript
با ادیتور کد آنلاین حرفهای، اولین و کاملترین پلتفرم ایرانی برای ویرایش کدهای تحت وب، تجربهای سریع، ایمن و متفاوت از کدنویسی تحت وب داشته باشید. این ویرایشگر که بر پایه موتور قدرتمند VS Code ساخته شده، تمام ابزارهای لازم برای طراحی و توسعه وب را در یک محیط ساده و کاربرپسند ارائه میدهد.ویژگیهای کلیدی ادیتور کد آنلاین
- ویرایش همزمان کدهای HTML، CSS و JavaScript
- هایلایت هوشمند سینتکس و تکمیل خودکار (IntelliSense)
- بررسی خطا در لحظه و بهبود کیفیت کدنویسی
- قابلیت fold کردن بخشهای کد برای نظم بیشتر
- پیشنمایش زنده و آنی بدون نیاز به رفرش صفحه
- محیط توسعه کامل و حرفهای بدون نیاز به نصب نرمافزار
مزایای استفاده از ادیتور کد آنلاین
• یادگیری و آموزش برنامهنویسی وب
این ویرایشگر محیطی عالی برای دانشجویان و علاقهمندان به برنامهنویسی است. با امکان مشاهده لحظهای نتایج، یادگیری HTML، CSS و JavaScript سادهتر و کاربردیتر میشود.• توسعه و تست سریع ایدهها
برای توسعهدهندگان حرفهای، ادیتور کد آنلاین بهترین ابزار برای تست سریع ایدهها، اشکالزدایی و نمونهسازی اولیه بدون نیاز به نصب نرمافزارهای سنگین است.• مصاحبهها و چالشهای کدنویسی
امکان نمایش همزمان کد و خروجی باعث میشود این ویرایشگر انتخابی عالی برای مصاحبههای شغلی و چالشهای کدنویسی باشد.چرا ادیتور کد آنلاین ما؟
این پلتفرم به طور ویژه برای جامعه برنامهنویسان ایرانی طراحی شده است. پشتیبانی از زبان فارسی، رابط کاربری روان و دسترسی آسان از طریق مرورگر در موبایل، تبلت و دسکتاپ، آن را به بهترین گزینه برای کدنویسی تحت وب تبدیل کرده است.امنیت و دسترسی آسان
- کاملاً رایگان و بدون محدودیت
- بدون نیاز به ثبتنام یا وارد کردن اطلاعات شخصی
- هیچ دادهای به سرور ارسال نمیشود؛ تمام پردازشها در سمت کاربر انجام میشود
- به دلیل امنیت بیشتر، ذخیرهسازی کدها انجام نمیشود و باید به صورت دستی کپی و پیست کنید
شروع کنید
همین حالا از پیشرفتهترین ادیتور کد آنلاین فارسی استفاده کنید و کدنویسی تحت وب را در محیطی سریع، امن و حرفهای تجربه کنید.مستندات رسمی زبانها
عرض نمایشگر شما کم است برای مشاهده کامل جدول ممکن است نیاز به اسکرول افقی داشته باشید!
فریمورکهای اصلی JavaScript
| نام | لینک سایت | کد آماده افزودن به HTML |
|---|---|---|
| React | https://reactjs.org/ | <script src="https://unpkg.com/react/umd/react.development.js"></script><script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> |
| Vue.js | https://vuejs.org/ | <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> |
| jQuery | https://jquery.com/ | <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> |
| Alpine.js | https://alpinejs.dev/ | <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.12.0/cdn.min.js"></script> |
کتابخانههای UI و کامپوننت
| نام | لینک سایت | کد آماده افزودن به HTML |
|---|---|---|
| Bootstrap | https://getbootstrap.com/ | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
| Tailwind CSS | https://tailwindcss.com/ | <script src="https://cdn.tailwindcss.com"></script> |
| Font Awesome | https://fontawesome.com/ | <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
| Materialize CSS | https://materializecss.com/ | <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> |
کتابخانههای کاربردی JavaScript
| نام | لینک سایت | کد آماده افزودن به HTML |
|---|---|---|
| Lodash | https://lodash.com/ | <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> |
| Axios | https://axios-http.com/ | <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script> |
| Chart.js | https://www.chartjs.org/ | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| Three.js | https://threejs.org/ | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| Swiper JS | https://swiperjs.com/ | <link href="https://cdn.jsdelivr.net/npm/swiper@9.0.0/swiper-bundle.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/swiper@9.0.0/swiper-bundle.min.js"></script> |
فونتهای پرکاربرد
| نام | لینک سایت | کد آماده افزودن به HTML |
|---|---|---|
| Google Fonts | https://fonts.google.com/ | <link href="https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap" rel="stylesheet"> |
| Iran Sans | https://fonts.google.com/ | <link href="https://fonts.googleapis.com/css2?family=IRANSansX&display=swap" rel="stylesheet"> |
این جدول کامل با کدهای آماده برای کپی کردن مستقیم در بخش <head> فایل HTML کاربران است.
راهنمای استفاده از کتابخانهها
برای استفاده از هر کتابخانه، کد مربوطه را در بخش <head>
فایل HTML خود کپی کنید. میتوانید چندین کتابخانه را همزمان استفاده نمایید.
پس از افزودن، میتوانید بلافاصله از توابع و کلاسهای آن در JavaScript و CSS
خود استفاده کنید. پیشنمایش زنده تغییرات را در پنل مشاهده نمایید.
پس از افزودن، میتوانید بلافاصله از توابع و کلاسهای آن در JavaScript و CSS
خود استفاده کنید. پیشنمایش زنده تغییرات را در پنل مشاهده نمایید.
نکات مهم:
- کدها را در قبل از بسته شدن تگ </head> قرار دهید
- ترتیب افزودن کتابخانهها مهم است (مثلاً jQuery قبل از Bootstrap)
- کدهای خود را مرتباً در ویرایشگر متن ذخیره کنید
اگر این ابزار برای شما مفید بود، خوشحال میشویم یک فنجان قهوه ما را مهمان کنید. 😎