محرر رمز بسيط ميت مع تسليط الضوء على بناء الجملة وأرقام الخط. 3 كيلو بايت/ض
يعمل المحرر على حد سواء في Vue 2.x و Vue 3.x وأنت حاليًا في الفرع الذي يدعم Vue 2.x. اذهب هنا للحصول على إصدار متوافق مع Vue 3.x
Prism-Editor.netlify.com
يوفر العديد من محرري التعليمات البرمجية القائمة على المتصفح مثل ACE و Codemirror و Monaco وما إلى ذلك القدرة على تضمين محرر رمز كامل الميزة في صفحة الويب الخاصة بك. ومع ذلك ، إذا كنت بحاجة فقط إلى محرر بسيط مع تمييز بناء الجملة دون أي من الميزات الإضافية ، فيمكن أن يكون مبالغة لأنها لا تحتوي عادة على بصمة صغيرة في حجم الحزمة. تهدف هذه المكتبة إلى تزويد محرر رمز بسيط مع دعم بناء الجملة دون أي من الميزات الإضافية ، وهو مثالي للتضمينات والنماذج البسيطة حيث يمكن للمستخدمين إرسال الرمز.
npm install vue-prism-editorأو
yarn add vue-prism-editorتحتاج إلى استخدام المحرر مع مكتبة طرف ثالث توفر تسليط الضوء على بناء الجملة. على سبيل المثال ، سيبدو وكأنه يتبع مع Prismjs:
قم بتسجيل المكون محليًا واستخدمه (موصى به)
< template >
< prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >
< script >
// import Prism Editor
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles
export default {
components : {
PrismEditor ,
} ,
data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
methods : {
highlighter ( code ) {
return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
} ,
} ,
} ;
</ script >
< style >
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >لاحظ أنه بناءً على أداة تمييز بناء الجملة الخاصة بك ، قد تضطر إلى تضمين CSS إضافية لإبراز بناء الجملة للعمل.
أو تسجيل المكون على مستوى العالم
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;استخدام المتصفح (لـ Codepen وما إلى ذلك):
< script src =" https://unpkg.com/[email protected].* " > </ script >
<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />
<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />
< style >
.height-200{
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >
< div id =" app " >
< prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >
< script >
new Vue ( {
el : "#app" ,
data : ( ) => ( {
code : "console.log('hello world')"
} ) ,
methods : {
highlighter ( code ) {
// js highlight example
return Prism . highlight ( code , Prism . languages . js , "js" ) ;
}
} ,
} )
</ script > | اسم | يكتب | تقصير | خيارات | وصف |
|---|---|---|---|---|
V-model value | string | "" | - | القيمة الحالية للمحرر أي الرمز لعرضه |
| تسليط الضوء | string => string | - | - | رد الاتصال الذي سيتلقى النص لتسليط الضوء عليه. ستحتاج إلى إرجاع سلسلة HTML مع تمييز بناء الجملة باستخدام مكتبة مثل PrismJs. |
| قراءة | Boolean | false | - | قراءة |
| الكتان | Boolean | false | - | ما إذا كان لإظهار أرقام الخط. الافتراضي false |
| autostylelinenmbers | Boolean | true | - | مطابقة أرقام خط الأرقام النص إلى السمة. الافتراضي true |
| TabSize | number | 2 | - | عدد الأحرف المراد إدراجها عند الضغط على مفتاح TAB. على سبيل المثال ، بالنسبة إلى 4 مسافة بادئة للمساحة ، سيكون tabSize 4 وسوف تكون insertSpaces true . الافتراضي: 2 |
| إدراج المساحات | boolean | true | - | سواء لاستخدام المساحات للمسافة البادئة. الافتراضي: true . إذا قمت بتعيينها على false ، فقد ترغب أيضًا في تعيين tabSize على 1 |
| agnoretabkey | boolean | false | - | ما إذا كان يجب على المحرر تجاهل مفتاح TAB ، بحيث يمكن لمستخدمي لوحة المفاتيح علامة التبويب عبر المحرر. يمكن للمستخدمين تبديل هذا السلوك باستخدام Ctrl+Shift+M (MAC) / Ctrl+M يدويًا عندما يكون هذا false . الافتراضي: false |
| اسم | حدود | وصف |
|---|---|---|
| مدخل | (code) | الحرائق عند تغيير الكود. |
| Keydown | (event) | ينبعث هذا الحدث عندما يحدث حدث keydown في المحرر |
| keyup | (event) | ينبعث هذا الحدث عندما يحدث حدث keyup في المحرر |
| انقر | (event) | ينبعث هذا الحدث عند النقر في أي مكان في المحرر |
| ركز | (event) | ينبعث هذا الحدث عند التركيز |
| طمس | (event) | ينبعث هذا الحدث عند طمس |
هذا الجزء مأخوذ من محرر الرمز البسيط
إنه يعمل عن طريق تراكب بناء الجملة المميز <pre> على a <textarea> . عندما تكتب ، حدد ، نسخ النص ، وما إلى ذلك ، تتفاعل مع <textarea> الأساسي ، وبالتالي فإن التجربة تبدو أصلية. هذا نهج بسيط للغاية مقارنة بالمحررين الآخرين الذين يعيدون تنفيذ السلوك.
يمكن إجراء تسليط الضوء على بناء الجملة من قبل أي مكتبة طرف ثالث طالما أنه يعيد HTML ويمكن التحكم فيه بالكامل من قبل المستخدم.
لا يدعم Vanilla <textarea> إدراج أحرف Tab للمسافة البادئة ، لذلك نعيد تنفيذها من خلال الاستماع إلى أحداث keydown وتحديث النص برمجيًا. أحد التحذيرات مع تحديث النص برنامجياً هو أننا نفقد مكدس التراجع ، لذلك نحن بحاجة إلى الحفاظ على مكدس التراجع الخاص بنا. نتيجة لذلك ، يمكننا أيضًا تنفيذ سلوك التراجع المحسن مثل التراجع عن كلمات كاملة مماثلة لمحرري مثل VSCode.
بسبب طريقة عملها ، لها قيود معينة:
<textarea> ، فإن تغيير أي شيء يؤثر على التصميم يمكن أن يؤدي إلى اختلاله.-webkit-text-fill-color: transparent ، والذي يعمل في جميع المتصفحات الحديثة (حتى غير الممتلكات مثل Firefox و Edge). على IE 10+ ، نستخدم color: transparent لا يخفي المؤشر. قد يظهر النص أكثر جرأة في المتصفحات غير المدعومة. ردف بوسع محرر الرمز
معهد ماساتشوستس للتكنولوجيا
