code input

code input

موارد أخرى

2.4.0

تنزيل

مدخل الرمز

Textareas قابلة للتخصيص بالكامل ، قابلة للتحرير ، يمكن وضعها في أي شكل من أشكال HTML. [عرض العرض التوضيحي]

استخدام مدخل الكود مع العديد من الموضوعات المختلفة يستخدم هذا العرض التوضيحي موضوعات من prism.js و gighly.js ، وهما برامج عالية الإضاءة بناء الجملة والتي تعمل بشكل جيد مع التوافق المدمج مع مدخلات الكود.

مكتبة JavaScript الواجهة ، مع:

ماذا تفعل؟

يتيح لك code-input تحويل أي سمة وبرنامج JavaScript Highlight العادي إلى Textareas الذي يتم تسليط الضوء على بناء الجملة باستخدام عنصر مخصص HTML. يستخدم CSS الفانيليا لتثبيت textarea على كتلة pre code ، ثم يعالج المسافات البادئة والتمرير ويصلح أي أخطاء ناتجة مع JavaScript. لمعرفة كيفية عملها وراء الكواليس (وليس كيفية استخدام هذه المكتبة) ، يرجى الاطلاع على مقالة CSS-Tricks التي كتبتها.

ما هي مزايا استخدام مدخلات الكود ، وما الذي يمكن استخدامه؟

على عكس مشاريع محرر الكود في الواجهة الأمامية الأخرى ، فإن بساطة كيفية عمل code-input تعني أنها قابلة للتخصيص بشكل كبير . نظرًا لأنه ليس محررًا كامل الميزة ، يمكنك اختيار الميزات التي تريدها لتضمينها ، واستخدام خوارزميات وموضوعات بناء الجملة المفضلة لديك .

يعمل عنصر <code-input> مثل <textarea> وبالتالي يعمل في نماذج HTML5 ويدعم باستخدام سمات name value والعلاقة placeholder ، أحداث مثل onchange ، إعادة تعيين النماذج ، على سبيل المثال لا الحصر ... (العرض التوضيحي)

قامت code-input أيضًا بتجميع العديد من الميزات في المكونات الإضافية الاختيارية من مساهمات مفتوحة المصدر ، مما يتيح لك اختيار أي ميزات تريدها. إذا كانت ميزة تريدها غير موجودة ، فيرجى فتح مشكلة / تساهم بها!

البدء مع `code-input` (في 4 خطوات بسيطة)

يدعم `code-input` أيضًا TypeScript (انقر)

يمكنك اتباع الإرشادات أدناه ، أو استخدام رمز المبدئي المتاح هنا لـ Aightly.js وهنا لـ prism.js.

تم تصميم code-input ليكون سهلاً الاستخدام وقابل للتخصيص . إليك كيفية استخدامه لإنشاء Textareas المضيء للبناء:

1. استيراد `code-input`

أولاً ، استيراد ملفات موضوعات JS و CSS الخاصة بـ Syntax-Highlighter الخاصة بك لتحويلها قابلة للتحرير.
بعد ذلك ، استيراد ملفات CSS و JS من code-input من إصدار تم تنزيله أو CDN. الملفات غير المؤكدة مفيدة لاستخدامها أثناء التطوير.

تم تنزيله محليًا (انقر)

 <!--In the <head>-->
< script src =" path/to/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" path/to/code-input.min.css " >

من JSDelivr CDN (انقر)

 <!--In the <head>-->
< script src =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.js " > </ script >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/WebCoder49/[email protected]/code-input.min.css " >

2. إنشاء قالب

والخطوة التالية هي إعداد template لربط code-input برفع بناء الجملة الخاص بك. إذا كنت تستخدم prism.js أو eleslight.js ، فيمكنك استخدام القالب المدمج ، أو يمكنك إنشاء خلاف ذلك. في هذه الأمثلة ، أقوم بتسجيل القالب باعتباره "syntax-highlighted" ، ولكن يمكنك استخدام أي اسم قالب طالما أنك ثابت.

Aightly.js:

 codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . hljs ( hljs , [ ] /* Array of plugins (see below) */ ) ) ;

Prism.JS:

 codeInput . registerTemplate ( "syntax-highlighted" , codeInput . templates . prism ( Prism , [ ] /* Array of plugins (see below) */ ) ) ;

مخصص:

 codeInput . registerTemplate ( "syntax-highlighted" , new codeInput . Template (
  function ( result_element ) { /* Highlight function - with `pre code` code element */
    /* Highlight code in result_element - code is already escaped so it doesn't become HTML */
  } ,

  true , /* Optional - Is the `pre` element styled as well as the `code` element?
         * Changing this to false uses the code element as the scrollable one rather
         * than the pre element */
        
  true , /* Optional - This is used for editing code - setting this to true sets the `code`
         * element's class to `language-<the code-input's lang attribute>` */

  false /* Optional - Setting this to true passes the `<code-input>` element as a second
         * argument to the highlight function to be used for getting data- attribute values
         * and using the DOM for the code-input */ ,

  [ ] // Array of plugins (see below)
) ) ;

3. إضافة الإضافات

تتيح لك المكونات الإضافية إضافة ميزات إضافية إلى قالب ، مثل المسافة التلقائية أو الدعم لإنشاء Alming.js. لاستخدامها ، فقط:

استيراد ملفات JS الخاصة بـ Plugins بعد استيراد code-input وقبل تسجيل القالب.
ضع مثيلات الإضافات الموجودة في مجموعة الإضافات عند التسجيل ، مثل هذا:

 < script src =" code-input.js " > </ script >
<!--...-->
< script src =" plugins/autodetect.js " > </ script >
< script src =" plugins/indent.js " > </ script >
<!--...-->
< script >
  codeInput . registerTemplate ( "syntax-highlighted" , 
    codeInput . templates . hljs (
      hljs , 
      [
        new codeInput . plugins . Autodetect ( ) , 
        new codeInput . plugins . Indent ( true , 2 ) // 2 spaces indentation
      ]
    )
  ) ;
</ script >

️ لسوء الحظ ، يمكن أن يسبب وضع ملحقات متعددة من نفس النوع في القالب حاليًا أخطاء وسلوك غير محدد ، حتى لو كان مثل هذا التكوين منطقيًا. هذه هي المشكلة رقم 118 وسيتم إصلاحها في أقرب وقت ممكن - إذا كنت ترغب في المساعدة والوقت الذي ترحب به ، ولكنه أيضًا في الجزء العلوي من قائمة المهام الخاصة بالصيانة.

لمشاهدة قائمة كاملة من الإضافات ووظائفها ، يرجى الاطلاع على الإضافات/README.MD.

4. باستخدام المكون

الآن بعد أن قمت بتسجيل قالب ، يمكنك استخدام عنصر المخصص <code-input> في HTML. إذا كان لديك أكثر من قالب واحد مسجل ، فأنت بحاجة إلى إضافة اسم القالب كسمة template . باستخدام العنصر ، سيؤدي استخدام سمة language إلى إضافة فئة language-{value} إلى كتلة pre code . يمكنك الآن استخدام سمات وأحداث HTML ، بالإضافة إلى أنماط CSS ، لجعل عنصرك بسيطًا أو تفاعليًا كما تريد ، كما لو كان عنصر textarea !

 < code-input language =" HTML " > </ code-input >

أو

 < code-input language =" HTML " placeholder =" Type code here " template =" syntax-highlighted " onchange =" console.log('Your code is', this.value) " > &lt; href='https://github.com/WebCoder49/code-input' > code-input&lt;/a > </ code-input >

️ في الوقت الحالي ، تحتاج إلى تعيين خاصية- --padding بدلاً من padding للحصول على CSS لعنصر code-input . يجب أن تعمل جميع الخصائص الأخرى كالمعتاد.

المساهمة

إذا كان لديك أي ميزات ترغب في إضافتها إلى code-input كإضافات أو وظائف أساسية ، أو وجدت أي أخطاء ، فيرجى فتح مشكلة أو شوكة وتقديم طلب سحب! سيتم تقدير جميع المساهمات في هذا المشروع مفتوح المصدر. يمكنك رؤية مزيد من المعلومات في ملف CONTRIBUTING.md .