monacode

موناكود

غلاف espodule رفيع حول محرر موناكو وأجمل

استكشاف جدوى استيراد محرر Monaco (الذي يعمل على قوى الكود) والوحدات الجمال مباشرة في المتصفح ؛ تهدف إلى جعل سطر واحد سهلاً لجلب تجارب تحرير الكود مثل مواطن مثل تطبيقات الويب دون خطوة بناء.

السفن التي تحتوي على جميع الميزات الموجودة عادة في VS Code Out Of The Jox: أشياء مثل تلميحات التعليمات البرمجية ، والاستدلال اكتب ، و Minfap ، و Outment Pallet ، و Select Multi-Cursor ، والعثور عليه ، والاستبدال ، وطي الرمز ، إلخ ، إلخ.

بالإضافة إلى هذه الميزات ، تم دمج أجمل بحيث يؤدي ضرب ⌘ + s إلى تنسيق الرمز.

⚡ تحقق من الإصدار المستضاف على https://monacode.live

الاستخدام

قم بتثبيت الوحدة النمطية كوحدة NPM واستيرادها باستخدام محدد الوحدة النمطية العارية ، أو استيرادها مباشرة من UNPKG:

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

من الممكن أيضًا تضمين المحرر في تطبيقك باستخدام iframe (انظر العرض التوضيحي):

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

تمرير خيارات التكوين في IFRAME كمعلمات بحث عناوين URL ، مع التأكد من تشفير URI القيم بشكل صحيح. يرجى ملاحظة ومع ذلك ، ليس من الممكن حاليًا تمرير خيارات التكوين المتداخلة.

API

تقوم الوحدة بتصدير وظيفة افتراضية واحدة تقبل كائن التكوين كوسيطة. يتم دمج التكوين المقدم مع تكوين افتراضي والذي هو نفسه مجموعة فرعية من الخيارات المتاحة لتكوين محرري Moanco. تشمل بعض القيم المفيدة التي يجب معرفتها:

• container : عنصر HTML موجود في DOM (أو ref إذا كان يستخدم React/Preact)
• value : سلسلة تمثل الرمز الأولي المراد تقديمه داخل المحرر
• language : سلسلة تمثل اللغة التي يجب على المحرر محاولة تمييز بناء الجملة وتلميحها
• fontSize : رقم يشير إلى رمز حجم خطوط البكسل الذي يجب أن يتم عرضه على
• theme : معرف سلسلة للموضوع المطلوب أو عنوان URL لملف JSON موضوع

إن استدعاء التصدير الافتراضي يعيد مثيلًا لمحرر Monaco الأساسي. تعرف على المزيد حول كيفية التفاعل مع المحرر من خلال قراءة وثائق API.

تطوير

يستخدم تشغيل الأمر التالي من جذر هذا المشروع servor لبدء خادم Dev ، ثم افتح المحرر والمتصفح على عنوان URL المناسب المحلي.

npm start

إنتاج

استخدام الأمر التالي من جذر هذا المشروع يستخدم esbuild إنشاء المصدر إلى ملف index.min.js واحد. تستغرق هذه العملية حاليًا ~ 1Second وتؤدي إلى وجود ملف إخراج يزن 4.6 ميغابايت (Compresses وصولاً إلى أقل من 1 ميجابايت مع Brotli).

npm run build

رخصة

مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.