ممکن است برایتان پیش آمده باشد که کد ادیتورتان دچار مشکل شده و یا به دلایل مختلف، نیاز به یک وب سایت یا ادیتور آنلاین برای کدنویسی داشته باشید. علاوه بر آن، بسیاری هستند که علاقه دارند تا در همان محیط مرورگر برنامه نویسی کنند و نتیجه را به صورت مستقیم و در همان لحظه ببینند. در هر صورت، آشنایی با یک ویرایشگر آنلاین وب که با محیطش آشنا باشید، شما را از دردسرهای زیادی نجات می‌دهد.
در این مقاله قصد داریم 9 وب سایت برتر را که ویرایشگر آنلاین html (html چیست) هستند، به شما معرفی کنیم. با استفاده از این ویرایشگرها، می‌توانیم به ساخت کد html آنلاین بپردازیم و به صورت آنلاین کدهای خود را ویرایش کنیم و در همان لحظه خروجی کد را ببینیم. در واقع آن‌ها به نوعی سایت برنامه نویسی آنلاین هستند و همچنین امکانات زیادی را در اختیار ما قرار می‌دهند. در ادامه با وب سایت آموزش برنامه نویسی سون لرن همراه باشید.
فهرست محتوای این مقاله
کد ادیتورهای آنلاین
همان‌طور که پیش‌تر گفتیم Editorهای آنلاین امکانات زیادی را در اختیار ما قرار می‌دهند. برای مثال ساخت کد html آنلاین را برای ما راحت می‌کنند و می‌توانیم کد را به صورت آنلاین تست کنیم. لازم به ذکر است، برای استفاده از بعضی از این سایتها نیاز است در ابتدا در سایت ثبت نام کنید. یکی از مزیت‌هایی که می‌توان برای ویرایشگرهای آنلاین نام برد، قابلیت save کردن می‌باشد. به این صورت که کدها را در بخش‌های مورد نظر قرار داده و از آن‌ها خروجی می‌گیریم. با این کار سایت لینکی را در اختیار ما قرار می‌دهد که با استفاده از آن می‌توانیم کدهای خود را به اشتراک بگذاریم. تعداد این ادیتورهای آنلاین بسیار زیاد است که ما در ادامه بهترین آن‌ها را به شما معرفی می‌کنیم.
کد ادیتور آنلاین CodePen
ویرایشگر CodePen یکی از محبوب‌ترین ابزارهای آنلاین برای نوشتن کدهای CSS ،HTML و JS است که همزمان با نوشتن کد می‌توانید خروجی کد را نیز مشاهده کنید.
کد ادیتور آنلاین CodeSandBox
CodeSandBox یک ادیتور آنلاین قدرتمند است که محیطی مانند محیط IDE دارد و می‌توانید از پروژه‌ی خود خروجی ZIP نیز دریافت کنید. همچنین می‌توانید پروژه‌های مختلفی را با React ،Angular ،Vue ،Node HTTP Server و... بنویسید.
ساخت کد html آنلاین با HTMLCodeEditor
HTMLCodeEditor یک ادیتور آنلاین برای نوشتن کدهای HTML است که ابزارهای مفیدی را نیز در اختیار شما قرار می‌دهد.
ساخت کد html آنلاین با HTMLhouse
HTMLhouse نیز یک ویرایشگر آنلاین html است و محیطی شبیه به HTMLCodeEditor دارد. اگر می‌خواهید فقط کدهای HTML را بنویسید و یا کدهای HTML را ویرایش کنید، این ویرایشگر گزینه‌ی بسیار مناسبی است.
ویرایشگر کد آنلاین Liveweave
Liveweave یکی دیگر از ادیتورهای آنلاین است که مانند ادیتورهای قبل می‌توانید به زبان‌های CSS ،HTML و JS کد بزنید. همچنین یک Tab به نام Library دارد که می‌توانید کتابخانه‌هایی مانند Bootstrap، jQuery، Three JS و... را در پروژه‌ی خود استفاده کنید.
ویرایشگر کد آنلاین PlayCode
PlayCode نیز امکاناتی شبیه به Liveweave دارد.
ادیتور آنلاین JSFiddle
JSFiddle یکی از ادیتورهای محبوب آنلاین است که مانند سایر ادیتورهای آنلاین می‌توانید در آن به زبان‌های تحت وب CSS ،HTML و JS کد بزنید.
ادیتور آنلاین Repl.it
وب سایت Repl.it محیطی را فراهم می‌کند که می‌توانید علاوه بر زبان‌های تحت وب، به زبان‌های دیگر مانند ++Java، C، C و... نیز کد بزنید.
ادیتور آنلاین JSBin
JSBin نیز مانند سایر ادیتورهای آنلاین است و امکانات متعددی را در اختیار شما قرار می‌دهد.
جمع‌بندی:
در این مقاله به معرفی 9 سایت کد نویسی آنلاین پرداختیم، شما برای ساخت کد html آنلاین تجربه‌ی استفاده از چه ابزاری را دارید؟ خوشحال می‌شویم که در بخش نظرات با ما و کاربران سون لرن به اشتراک بگذارید.
سلام میخواستم بدونم ابزاری هست که زمان کد زدن بهمود بگه که کد نویسی مون استاندارد هست یا نه (برای طرا حی وب)
سلام.
ابزار WaKaTime یکی از گزینه های خوب در این زمینه هست و به صورت پلاگین روی IDEهای مختلف (برای طراحی وب روی VSCode) نصب میشه.
یه نکته ای هست که این ابزار و کلا هر چیز دیگه ای که هست، صرفا از روی زمان باز بودن محیط ویرایشگر روی فایلهای یک زبان خاص (مثل جاوا اسکریپت) میاد محاسبه میکنه که شما چند ساعت برنامه نویسی کردید. دلیلش هم اینه که هیچ ابزاری نمیتونه متوجه بشه صرفا IDE باز بوده یا واقعا در حال کدنویسی بودید. برای همین ممکنه شما امروز یکساعت فول تایم کدنویسی کنید و فردا 5 ساعت فایل روی صفحه شما باز باشه اما مشغول فیلم دیدن باشید 🙂 اینجا ابزارها اون 5 ساعت رو بیشتر از 1 ساعت در نظر میگیرند.
اما در مورد اینکه مثلا 3 ساعت کدنویسی استاندارد هست یا 2 ساعت، برای اینم ابزار خاصی وجود نداره چون بستگی به مشکلی داره که براش برنامه نویسی میکنید. برای این بخش پیشنهاد میکنم از سایتهای افزایش مهارت حل مسائل برنامه نویسی استفاده کنید. چون این سایتها معمولا برای هر سوال یه تایم مشخص در نظر میگیرند و اینطوری میتونید سرعت خودتون رو محک بزنید.
خیلی ممنون از جوابتون. تست کردم الان. تقریبا همون چیزیه که مد نظرمه
فقط اینکه این سرویس محدودیتی برای آی پی ایران که نداره؟
و اینکه من میخوام کاربر بتونه تو همون پست سایت اون کد ها رو ویرایش و نتیجه تغییر رو ببینه؟ میشه برای این مورد هم راهنمایی کنید؟
برای ایران محدودیتی نداره ولی اگر بخواید کاری کنید که کاربران بتونن اون رو ویرایش کنن و … باید پول پرداخت کنید و اکانت Codepen خودتون رو Professional کنید
با Pro کردن اکانت امکانات زیاد دیگه ای هم در اختیارتون قرار داده میشه که خیلی بدرد بخور هست
در این لینک میتونین اطلاعات بیشتری بدست بیارید
http://codepen.io/pro/
خیلی ممنون آقای اسفندیاری. سرویسشون ارزشش رو داره اما الان برای سایت نوپا نمیصرفه. اگه پلاگینی چیزی پیدا کردید لطفا اون رو هم معرفی کنید
تشکر
بله پیدا کردم چشم
موفق باشید
سلام
ممنون بابت مقاله خوبتون
ببخشید برای سایتای وردپرسی همچین پلاگینی وجود داره؟ که بشه تو محتوا، مثلا همین صفحه کد های مختلف رو گذاشت و پیش نمایش اون رو هم دید و یا کاربر بتونه کد ها رو ویرایش کنه؟
منظورتون رو دقیقا متوجه نشدم ولی شما مثلا میتونین یک کد رو درون Codepen بنویسید و اون رو درون سایت خودتون Embed کنید تا دیگر کاربران اون رو ببینن.
سلام واقعا مطالب عالی است.ممنون