محرر ألف

https://alifcommunity.github.io/alif-editor/

هنا يوجد كود محرر ألف، الذي يمكن استخدامه ضمن تطبيقات عديدة مثل بيئة تطوير عن طريق صنع تطبيق سطح المكتب ب electron، أو عن طريق تشغيل بيئة التطوير على المتصفح مباشرة.

لقطات شاشة

كيفية التشغيل محليا

ملاحظة: يمكنك الاستخدام من خلال الموقع

متطلبات

npm install -g yarn	# تثبيت يارن
yarn                # تثبيت الاعتماديات

تشغيل

yarn start # لتشغيل الأكواد

كيفية إعادة استخدام قواعد التلوين في مكان آخر

أولا: codemirror v5

قواعد التلوين عبارة عن ملف واحد فقط موجود هنا: src/codemirror/alif-simple-mode-states.js.

كل ما عليك هو استخدامها هكذا:

CodeMirror.defineSimpleMode("alif", 👉alifSimpleModeStates👈);

مع الأخذ في الحسبان إعداد محرر codemirror وجعله من اليمين لليسار وإضافة الشكل الخاص به (theme)، وتضمين لغات الجافاسكريب وال C-like، لأن لغة ألف يمكن أن يكتب بها هذه اللغات. ستجد هذه اللغات مضمنة في src/codemirror/alif-mode.js، والإعدادت هنا src/codemirror/index.js.

ثانيا: codemirror v6

يمكنك الإطلاع على مشروع alifstudio3 لرؤية مثال واقعي عن طريقة استخدام قواعد التلوين في مشروع آخر.

قواعد التلوين تأخذ من نفس الملف، لكن الاختلاف يكمن في طريق الإعداد ومتطلبات التشغيل، إذ أنها تعمتد على الوحدات التي تستورد من خلال import، ثم يتم تَحزِيمُها في عن طريق مُحَزِّمات مثل parcel.

لإنشاء المشروع ثم البناء لتحصل على الملفات جاهزة للاستخدام، إذ يتم البناء في مجلد dist ستكتب ال html الخاص بك في ملف ./my-html-file.html الموجود في المسار الجذر، ثم تضيف ملف الجافاسكريبت الخاص بك الذي سيكون به الاستيراد، مثل:

<script src="./my-javascript-file-that-conatins-imports.js"></script>

كود الجافاسكريبت الخاص بك ./my-javascript-file-that-conatins-imports.js، سيكون مشابها للموجود في src/codemirror-v6/index.js.

في النهاية ستقوم بالبناء وسينتج مجلد به ملف ./dist/index.html مع باقي الملفات والأكواد، بحيث لو نقرت على ملف index.html وفتحته في المتصفح، ستجده يعمل دون الحاجة ل parcel أو npm أو yarn أو node. يمكنك أخذ المجلد الذي تم البناء فيه ووضعه في أي مكان أو استضافته وإعطاء نطاق له.

# my-html-file.html contains <script> which src the js
# file "./my-javascript-file-that-conatins-imports.js"
  
# parcel by default builds into `./dist`, but we can change it, for example to `my-dist`
  
# you can specify your library name if you want to use directly from the `window` object,
# for example when "./my-javascript-file-that-conatins-imports.js" contains exports as well,
# see `./alifstudio_data/src/index.js` in alifstudio3 repo, as example `export myFunction(){...}`
# now you can use it from the window like this: `window.alif.myFunctionName()` or you can
# simply use the function like this: `alif.myFunctionName()`

> yarn parcel build ./my-html-file.html --out-dir ./my-dist --global alif

رخصة

MIT