کتابخانه
monaco-editor یه ویرایشگر کد مرورگریه که مایکروسافت از هسته VS Code جدا کرده. با اون می تونی توی صفحه وب یه محیط کدنویسی واقعی بسازی، با رنگ بندی سینتکس، پیشنهاد خودکار، ویرایشگر مقایسه و تم های مختلف. مجوزش MIT و بسته اش روی npm منتشر شده.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۹۶٫۲ مگابایت· ۱۷۱۸ فایل· انتشار
SHA-256: 1e421b9b7d84d8e86f5b3a67408f75a4928f2fcb707f2005a3e920ef5da7d20b
اگه تا حالا توی VS Code کد نوشتی، ظاهر و رفتار monaco-editor رو می شناسی. مایکروسافت این ویرایشگر رو از دل VS Code جدا کرده و به شکل یه کتابخونه جاوااسکریپت منتشر کرده تا توی هر صفحه وب کار کنه. یعنی به جای یه textarea ساده که نه رنگ داره نه شماره خط، یه ویرایشگر کامل توی صفحه داری.
کجا به کارت میاد؟ هر جا که کاربر باید کد یا متن ساختاریافته تایپ کنه. مثلاً پنل مدیریتی که توش CSS یا JavaScript سفارشی وارد می شه، افزونه وردپرسی که فایل قالب یا تنظیمات JSON رو ویرایش می کنه، سایت آموزش برنامه نویسی، یا ابزاری که دو نسخه از یه فایل رو کنار هم مقایسه می کنه. رنگ بندی سینتکس برای زبان های مختلف، جستجو و جایگزینی، چند مکان نما، نقشه کوچک کنار ویرایشگر، تم روشن و تیره و ویرایشگر diff، همه از اول توش هست. برای جاوااسکریپت، تایپ اسکریپت، JSON، CSS و HTML پیشنهاد خودکار و نمایش خطا هم داره که با web worker ها کار می کنه.
کجا انتخاب خوبی نیست؟ اگه فقط یه فیلد کوچیک برای چند خط متن می خوای، monaco-editor برات زیادیه. حتی اگه فقط رنگ بندی ساده می خوای، یه کتابخونه سبک تر معمولاً کافیه. حجمش نسبت به ویرایشگرهای سبک قابل توجهه و راه اندازی worker ها هم یه کم تنظیم می خواد. پشتیبانی رسمیش روی مرورگر موبایل کامل نیست، پس اگه بیشتر کاربرهات با گوشی میان، حتماً خودت تست کن. یه نکته دیگه: این ویرایشگر برای کدنویسی ساخته شده. برای نوشتن متن فارسی و راست به چپ، مثل یه ویرایشگر محتوا، انتخاب مناسبی نیست.
برای سایت های ایرانی یه نکته عملی هست. فایل های این کتابخونه زیاده و به worker نیاز داره، پس لودش رو به یه CDN خارجی گره نزن. توی روزهای محدودیت اینترنت بین الملل اون CDN در دسترس نیست و ویرایشگر توی صفحه بالا نمیاد. بهتره فایل ها رو روی هاست خودت بذاری. اگه سایتت وردپرسیه، فایل ها رو توی پوشه قالب یا افزونه خودت نگه دار تا با دامنه خودت لود بشن. نسخه های رسمی و بدون تغییر monaco-editor توی مخزن داخلی ما هم هست و می تونی از همون بگیری.
کلیت کار چند قدمه، ولی جزئیات دقیقش به نوع بسته و ابزار ساختی که استفاده می کنی بستگی داره. کد آماده نمونه هم پایین همین صفحه هست.
توی وردپرس هم مسیر همینه: اسکریپت ها رو توی قالب یا افزونه خودت ثبت کن. اول روی یه محیط آزمایشی امتحانش کن، بعدش بیارش روی سایت اصلی.
VS Code یه برنامه کامل با فایل منیجر، ترمینال و افزونه هاست. monaco-editor فقط هسته ویرایشگر اونه که به شکل کتابخونه جاوااسکریپت توی صفحه وب خودت می شینه. پس قابلیت های ویرایش کد رو داری، ولی بقیه بخش های برنامه رو نداری. مثلاً خبری از باز کردن پروژه و اجرای دستور نیست.
بله، به شرطی که فایل ها رو درست توی قالب یا افزونه خودت لود کنی. معمولاً برای فیلدهای کد سفارشی و ویرایش JSON یا CSS توی پیشخوان استفاده می شه. مسیر worker ها رو حتماً درست تنظیم کن و فقط توی صفحه هایی لودش کن که لازمش دارن.
اگه فایل ها رو روی هاست خودت بذاری و به CDN خارجی وابسته نباشی، بله. مشکل معمولاً از جایی شروع می شه که لودش به یه منبع خارجی وصله و اون منبع در دسترس نیست. بعد از راه اندازی، یه بار هم با اینترنت بین الملل قطع تستش کن.
پشتیبانی رسمیش روی مرورگرهای موبایل کامل نیست. برای ابزارهایی که بیشتر با دسکتاپ استفاده می شن مشکلی نداره، ولی اگه کاربرهات با گوشی کد می نویسن، قبل از انتشار روی چند دستگاه واقعی تست کن. مخصوصاً کیبورد موبایل، انتخاب متن و اسکرول داخل ویرایشگر رو چک کن. اگه نتیجه راضی کننده نبود، برای موبایل یه ویرایشگر سبک تر بذار.
مجوز monaco-editor از نوع MIT هست و استفاده تجاری رو اجازه می ده. فقط باید اطلاعیه مجوز و حق نشر رو همراه کتابخونه نگه داری. این مجوز برای فروش پروژه به مشتری هم مشکلی ایجاد نمی کنه، ولی وابستگی های دیگه ای که کنارش استفاده می کنی ممکنه مجوز جدا داشته باشن، پس اونا رو هم نگاه کن. اگه شرایط خاصی داری، متن کامل مجوز رو یه بار بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.