إحدى السمات الرئيسية لمدونة البرمجة هي كتل التعليمات البرمجية. لست مضطرًا لتنسيقها باستخدام أداة تمييز البنية ، ولكنها تجعل مدوناتك تبدو أكثر جمالًا إذا فعلت ذلك. يمكنه أيضًا تحسين قابلية قراءة التعليمات البرمجية الخاصة بك.
ستوضح لك هذه المقالة كيفية استخدام أداة تمييز التفاعل-بناء الجملة لتمييز كتل التعليمات البرمجية في React. ستقوم بإنشاء مكون كتلة تعليمات برمجية قادر على تمييز الكود الذي تم تمريره إليه باستخدام صيغة اللغة المتوفرة.
إبراز بناء الجملة باستخدام أداة تمييز بناء الجملة
تسمح لك أداة تمييز بناء الجملة بإبراز التعليمات البرمجية باستخدام React. خلافا لغيرها محددات بناء الجملة، لا تعتمد أداة تمييز بنية الجملة على ComponentDidUpdate أو ComponentDidMount لإدراج الشفرة المميزة في DOM باستخدام بشكل خطيرSetInnerHTML.
هذا النهج خطير لأنه يعرض تطبيقًا لـ هجمات البرمجة النصية عبر المواقع.
بدلاً من ذلك ، يستخدم شجرة بناء الجملة لبناء DOM الظاهري وتحديثه فقط بالتغييرات.
يستخدم المكون PrismJS و Highlight.js في الخلفية. يمكنك اختيار استخدام أي منهما لتمييز الرمز الخاص بك. إنه سهل الاستخدام للغاية لأنه يوفر تصفيفًا خارج الصندوق.
يقبل مكون أداة تمييز التفاعل والنحو الكود واللغة والأسلوب كدعامات. يقبل المكون أيضًا خيارات التخصيص الأخرى. يمكنك العثور عليها في رد فعل وثائق تمييز بناء الجملة.
استخدام مكون التفاعل-تركيب-تمييز
لبدء استخدام أداة تمييز بناء الجملة في React ، قم بتثبيتها عبر npm.
npm تثبيت رد فعل-بناء الجملة-تمييز --حفظقم بإنشاء مكون جديد يسمى CodeBlock.js في تطبيق React والاستيراد رد فعل-بناء الجملة-تمييز:
يستورد بناء الجملة من "رد فعل - بناء الجملة - تمييز" ؛
يستورد {دوكو} من "رد فعل-تركيب-تمييز / dist / esm / styles / hljs" ؛
مقدار ثابت CodeBlock = ({codestring}) => {
إرجاع (
<لغة التمييز ="جافا سكريبت" النمط = {docco}>
{codeString}
</SyntaxHighlighter>
);
};
يقبل مكون SyntaxHighlighter اللغة والنمط المطلوب استخدامه. كما أنها تأخذ سلسلة التعليمات البرمجية كمحتوياتها.
يمكنك تقديم المكون أعلاه على النحو التالي:
مقدار ثابت التطبيق = () => {
مقدار ثابت codeString = `
مقدار ثابت مربع = (ن) => إرجاع ن * ن
`
إرجاع(
<CodeBlock codestring = {codeString} />
)
}
من المهم ملاحظة أن استخدام أداة تمييز بناء الجملة يمكن أن يزيد من حجم البنية ، لذلك إذا كنت بحاجة إلى ذلك ، يمكنك استيراد البنية الخفيفة. ومع ذلك ، لا يحتوي التصميم الخفيف على أنماط افتراضية.
ستحتاج أيضًا إلى استيراد وتسجيل اللغات التي تريدها باستخدام ملف تسجيل اللغة وظيفة تم تصديرها من البناء الخفيف.
يستورد { خفيفة كما تمييز التركيب} من "رد فعل - بناء الجملة - تمييز" ؛
يستورد شبيبة من "رد فعل-تركيب-تمييز / dist / esm / languages / hljs / javascript" ؛
بناء الجملة Highlighter.registerLanguage ('جافا سكريبت'، شبيبة) ؛
يستخدم هذا المكون Highlight.js لتمييز الكود.
لاستخدام PrismJS بدلاً من ذلك ، قم باستيراده من حزمة رد فعل-بناء الجملة-تمييز مثل هذا:
يستورد { نشور زجاجي كما تمييز التركيب} من "رد فعل - بناء الجملة - تمييز" ؛
يستورد {vscDarkPlus} من "رد فعل-تركيب-تمييز / dist / esm / أنماط / منشور" ؛
لبناء ضوء المنشور ، قم باستيراد PrismLight وقم بتسجيل اللغة التي تستخدمها.
يستورد {بريزملايت كما تمييز التركيب} من "رد فعل - بناء الجملة - تمييز" ؛
يستورد شبيبة من "أداة تمييز التفاعل-تركيب الجملة / dist / esm / اللغات / المنشور / jsx" ؛
يستورد نشور زجاجي من "رد فعل-تركيب-تمييز / dist / esm / أنماط / منشور / منشور" ؛
بناء الجملة Highlighter.registerLanguage ('شبيبة'، شبيبة) ؛
يعد استخدام المنشور مفيدًا ، خاصةً عند تمييز jsx لأن أداة تمييز التفاعل-بناء الجملة لا تدعمها بالكامل.
إضافة أرقام الأسطر إلى كتلة التعليمات البرمجية
الآن بعد أن عرفت كيفية تمييز كتلة التعليمات البرمجية ، يمكنك البدء في إضافة ميزات إضافية مثل أرقام الأسطر.
مع أداة تمييز بناء الجملة ، ما عليك سوى المرور showLineNumbers إلى مكون SyntaxHighlighter وضبطه على true.
<لغة التمييز ="جافا سكريبت" النمط = {docco} showLineNumbers ="حقيقي">
{codeString}
</SyntaxHighlighter>
سيعرض المكون الآن أرقام الأسطر بجوار التعليمات البرمجية الخاصة بك.
استخدام الأنماط المخصصة في المكون الخاص بك
على الرغم من أن أداة تمييز بنية الجملة والتفاعل توفر التصميم ، فقد تحتاج إلى تخصيص كتل التعليمات البرمجية الخاصة بك في بعض الأحيان.
لهذا ، تسمح لك الحزمة بالمرور مضمنة أنماط CSS إلى خاصية customStyle كما هو موضح أدناه:
<لغة التمييز ="جافا سكريبت" النمط = {vscDarkPlus} customStyle = {{borderRadius: "5 بكسل"، لون الخلفية: "# 001E3C"}} >
{codestring}
</SyntaxHighlighter>
سيحتوي مقطع التعليمات البرمجية المميز على نصف قطر حد مخصص ولون خلفية في هذا المثال.
أهمية إبراز النحو
يمكنك استخدام حزمة رد الفعل-بناء الجملة-تمييز لتمييز الشفرة في React. يمكنك استخدام الإصدار الخفيف لتقليل حجم الإنشاء وتخصيص كتل التعليمات البرمجية باستخدام الأنماط الخاصة بك.
يؤدي إبراز مقتطفات الشفرة إلى جعل الكود الخاص بك يبدو جيدًا ، ويحسّن قابلية قراءته ، ويجعله أكثر سهولة للقراء.
