تنزيل livecodes - تنزيل رمز المصدر livecodes

livecodes

موارد أخرى

v39

تنزيل

livecodes

ملعب رمز يعمل فقط!

ملعب رمز غني بالميزات ، مفتوح المصدر ، من جانب العميل لـ React ، Vue ، Svelte ، Solid ، TypeScript ، Python ، Go ، Ruby ، PHP و 90+ لغة/أطر.

جربه الآن على livecodes.io

الوثائق

ما الذي يجعل LiveCodes مختلفة؟

ملعب رمز يعمل فقط!

لا توجد خوادم لتكوين (أو دفع مقابل!)
لا توجد قواعد بيانات للحفاظ على (أو دفع ثمن!)
لا تثبيتات
لا توجد ملفات تكوين
لا توجد خطوات بناء
لا توجد رسوم اشتراك (مجانية ومفتوحة المصدر)
لا يوجد حساب مطلوب *
لا حدود للاستخدام (مشاريع خاصة غير محدودة)
90+ اللغات/الأطر/المعالجات
مجموعة كبيرة من الميزات والتكامل
استيراد رمز من مجموعة واسعة من المصادر
استخدم وحدات من NPM و Deno.land/x و JSR و Github وغيرها
قم بتضمينه بسهولة في صفحات الويب الخاصة بك
يعمل في المتصفح (جانب العميل)

_{* حساب github مطلوب فقط للميزات التي تستخدم تكامل GitHub.}

بداية سريعة

تطبيق مستقل

انتقل إلى LiveCodes.io

... واستمتع بجميع الميزات!

ملعب مضمن

أضف هذا الرمز إلى صفحتك:

 < div id =" container " > </ div >
< script type =" module " >
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes' ;

  createPlayground ( '#container' , {
    params : {
      markdown : '# Hello LiveCodes!' ,
      css : 'h1 {color: dodgerblue;}' ,
      js : 'console.log("Hello, from JS!");' ,
      console : 'open' ,
    } ,
  } ) ;
</ script >

^{تحقق من الوثائق للملاعب المدمجة.}

مستضافة ذاتي

قم بتنزيل إصدار
ضعه على خادم ملفات ثابت (مجانًا!) ^{1 ، 2 ، 3 ، 4 ، 5}
^{تحقق من دليل الاستضافة الذاتية (بما في ذلك الإعداد المدمج للنشر على صفحات github).}

... وهو يعمل فقط!

ملخص ميزة

مجموعة واسعة من دعم اللغة (90+ لغة/أطر/معالجات)
محرر قوي
صديق للهاتف المحمول
الموارد الخارجية/المكتبات
وحدات استيراد من NPM و Deno.land/x و JSR و Github وغيرها
رمز ما قبل الملء
مشاريع الاستيراد/التصدير
يشارك
تضمين الملعب في أي صفحة ويب
عرض أوضاع
نشر
قوالب بداية
أصول
موضوعات
أدوات DEV (وحدة التحكم ، عارض الرمز المترجم ، عداء اختبار)
تنسيق الكود
Intellisense
مساعد رمز الذكاء الاصطناعي؟
وضع لايت
وضع القراءة فقط
إذاعة
المزامنة
النسخ الاحتياطي/الاستعادة
جانب العميل!
قابلة للتكوين جدا
بيئة خالية من البناء صديقة للمطور
SDK قوي (متاح لفانيليا جافا سكريبت ، TypeScript ، React ، Vue و Svelte)
وثائق شاملة
ركز على الخصوصية والأمن
مجاني ومفتوح المصدر

للحصول على التفاصيل ، تحقق من القائمة الكاملة للميزات.

LiveCodes SDK

توفر مجموعة تطوير البرمجيات (SDK) واجهة سهلة وقوية ، للتضمين والتواصل مع ملاعب LiveCodes.

يتم توفير SDK كقوة خفيفة (أقل من 5 كيلو بايت Gzipped) ، حزمة NPM التبعية الصفرية ، وهي متوفرة أيضًا من CDNs. يمكن استخدامه لإنشاء ملاعب مع مجموعة واسعة من التكوينات وخيارات التضمين. بالإضافة إلى ذلك ، تسمح أساليب SDK بالاتصال البرنامجي والتحكم في الملاعب أثناء وقت التشغيل.

تثبيت

 npm i livecodes

الاستخدام

مثال: (مفتوح في LiveCodes)

 import { createPlayground } from 'livecodes' ;

createPlayground ( '#container' , {
  config : {
    markup : {
      language : 'markdown' ,
      content : '# Hello World!' ,
    } ,
  } ,
  view : 'result' ,
} ) ;

JavaScript SDK هو الإطار/المكتبة اللاأدري. ومع ذلك ، يتم أيضًا توفير مكونات الغلاف للمكتبات الشهيرة (تتفاعل حاليًا و VUE). يمكن استخدام SDK في Svelte مباشرة بدون أغلفة. يوفر دعم TypeScript السلامة وتجربة مطور رائعة.

React SDK مثال: (مفتوح في LiveCodes)

 import LiveCodes from 'livecodes/react' ;

const config = {
  markup : {
    language : 'markdown' ,
    content : '# Hello World!' ,
  } ,
} ;
const Playground = ( ) => < LiveCodes config = { config } view = "result" /> ;
export default Playground ;

مثال Vue SDK: (مفتوح في LiveCodes)

 < script setup >
  import LiveCodes from 'livecodes/vue' ;

  const config = {
    markup : {
      language : 'markdown' ,
      content : '# Hello World!' ,
    } ,
  } ;
</ script >

< template >
  < LiveCodes :config =" config " view =" result " />
</ template >

بالإضافة إلى ذلك ، يسمح SDK بإنشاء روابط للملاعب:

 import { getPlaygroundUrl } from 'livecodes' ;

const url = getPlaygroundUrl ( {
  config : {
    markup : {
      language : 'markdown' ,
      content : '# Hello World!' ,
    } ,
  } ,
} ) ;

console . log ( url ) ;