كتلة التعليمات البرمجية المحسنة: تسليط الضوء على بناء الجملة والمزيد

في العام الماضي، وردبرس.كوم قدم محرري التعليمات البرمجية الجديدة لمحرر الكتلة ومربع إدخال CSS الإضافي في مسؤول WordPress. كانت هذه هي المرحلة الأولى من جهد أكبر لجعل تجربة تحرير التعليمات البرمجية أكثر متعة.

واليوم، يسعدني أن أعلن عن إطلاق المرحلة الثانية من هذا الجهد: تقديم كتلة التعليمات البرمجية الجديدة والمحسنة.

هذه ليست كتلة جديدة. إنه تحسين لمجموعة التعليمات البرمجية الحالية التي من المحتمل أنك كنت تستخدمها بالفعل، والتي تتضمن العديد من التحسينات على النسخة الأصلية:

• تسليط الضوء على بناء الجملة: يدعم تسليط الضوء على بناء الجملة على أساس اللون لأكثر من 100 لغة مشتركة.
• إعدادات: قرر إظهار اسم الملف، واسم اللغة، وأرقام الأسطر، وحتى تضمين زر نسخ للزائرين.
• السحب والإفلات: سيؤدي سحب ملف التعليمات البرمجية من جهاز الكمبيوتر الخاص بك إلى المحرر إلى تحويله تلقائيًا إلى كتلة التعليمات البرمجية مع مجموعة اللغة.
• التحولات: قم بتحويل الكتل الأخرى المدعومة بالتعليمات البرمجية على WordPress.com، مثل Syntax Highlighter، إلى كتلة Code الجديدة.
• الأنماط: قم بتخصيص ألوان بناء الجملة مباشرةً من المحرر أو عبر “theme.json” إذا كنت مطورًا.

استخدام كتلة التعليمات البرمجية المحسنة

ليس عليك تمكين أي شيء لبدء استخدام الإصدار الجديد من كتلة التعليمات البرمجية. إنه متاح للاستخدام بالفعل. ما عليك سوى إدخال كتلة التعليمات البرمجية في أي مكان في محرر الكتل وإضافة التعليمات البرمجية الخاصة بك.

بشكل افتراضي، عند إضافة كتلة التعليمات البرمجية وإدراج التعليمات البرمجية، سترى التعليمات البرمجية الخاصة بك في نص عادي:

وبطبيعة الحال، لا يتضمن Plain Text أي تمييز لبناء الجملة لأنه ليس لغة. لتغيير هذا، اختر لغة التعليمات البرمجية من الإعدادات → اللغة القائمة المنسدلة في الشريط الجانبي:

سيتم بعد ذلك تطبيق تمييز بناء الجملة بناءً على اللغة التي حددتها، مما يجعل الكود أكثر قابلية للقراءة لك وللزائرين!

نصيحة احترافية: إذا قمت بكتابة ثلاث علامات خلفية متبوعة باسم اللغة (على سبيل المثال، ```php) ثم ضرب يدخل، سيقوم المحرر تلقائيًا بإنشاء مثيل كتلة التعليمات البرمجية الجديد وملء الملف تلقائيًا لغة جلسة.

إذا كنت تريد الارتقاء بميزات مجموعة التعليمات البرمجية الخاصة بك إلى مستوى أعلى، فيمكنك أيضًا تكوين العديد من الإعدادات الأخرى إلى جانب اللغة:

• اسم الملف: أضف اسم ملف مخصصًا لعرضه في الجزء العلوي الأيسر من مقطع التعليمات البرمجية (مفيد عند توجيه القراء خلال البرامج التعليمية).
• عرض اسم اللغة: يعرض اسم اللغة في الزاوية اليمنى العليا من الكتلة.
• إظهار زر النسخ: إدراج زر نسخ في الجزء العلوي الأيمن من الكتلة، مما يسمح لزوار الموقع بنسخ الكود بالكامل.
• إظهار أرقام الأسطر: يعرض أرقام الأسطر بجوار الكود الخاص بك على اليسار.
• تبدأ أرقام الأسطر عند: اختر رقم سطر البداية.

سيؤدي هذا إلى جعل أمثلة التعليمات البرمجية الخاصة بموقعك أكثر سهولة في القراءة:

تخصيص ألوان كتلة التعليمات البرمجية

هناك طرق متعددة لتخصيص تمييز بناء الجملة والألوان المعروضة مع كتلة Code المحسنة. في هذا القسم، سأرشدك عبر كل التقنيات بدءًا من الأساليب الأسرع/الأبسط وحتى التقنيات الأكثر تقدمًا.

اختيار نمط الكتلة

تأتي كتلة Code مع أربعة أنماط من الكتل خارج الصندوق:

• تقصير: سيستخدم الأنماط والألوان الافتراضية من المظهر الخاص بك.
• لا تسليط الضوء: تعطيل تسليط الضوء على بناء الجملة.
• الضوء الشمسي: نظام الألوان الفاتحة.
• الظلام المشمس: نظام الألوان الداكنة.

يمكن للموضوعات أيضًا تسجيل أنماط إضافية. يعد تحديد أحد هذه الأنماط هو أسرع طريقة لتغيير كيفية إخراج كتلة التعليمات البرمجية الخاصة بك:

تخصيص الألوان من المحرر

يمكنك أيضًا تخصيص الألوان مباشرة من المحرر عبر الأنماط → اللون لوحة في الشريط الجانبي للكتلة. تحتوي الكتلة على مجموعة واسعة من خيارات الألوان لتخصيص كل جانب من جوانب تمييز بناء الجملة:

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

تخصيص كتلة التعليمات البرمجية عبر theme.json

إذا كنت مطورًا أو مؤلفًا للموضوع، فستحتاج على الأرجح إلى تحديد ألوان بناء الجملة الافتراضية والأنماط الأخرى للإخراج الافتراضي للكتلة. theme.json يتم تضمين الدعم مع هذه الدفعة من التحسينات.

إليك ما تبدو عليه أنماط مجموعة التعليمات البرمجية المخصصة الخاصة بي بعد إجراء بعض التعديلات theme.json:

لأن برنامج WordPress نفسه لا يدعم الألوان المخصصة عبر theme.json، قام المطورون في WordPress.com بتوفير دعم مخصص لهذه الميزة.

يمكنك تخصيص أي من ألوان بناء الجملة عبر settings.custom.core/code في theme.json. هذا كائن حيث يكون كل مفتاح هو اسم لون بناء الجملة والقيمة هي اللون نفسه.

فيما يلي مثال مقتطف يمكنك استخدامه لتخصيص الألوان الخاصة بك:

يتم دعم أي لون CSS صالح، لذلك لا تقتصر على رموز الألوان السداسية. استخدم خصائص CSS المخصصة وRGBA والمزيد.

إذا كنت ترغب في استعارة كامل theme.json التخصيصات، انسخ والصق الكود التالي. يتضمن أنماطًا مخصصة إضافية لجعل كتلة التعليمات البرمجية أجمل:

ابدأ مشاركة الرمز الآن.

سواء كنت تنشر مقتطفات أو برامج تعليمية كاملة، فإن كتلة التعليمات البرمجية المحسّنة تجعل المشاركة وتصميم التعليمات البرمجية في WordPress.com أكثر سلاسة وقابلية للتخصيص من أي وقت مضى.

يتيح لك تمييز بناء الجملة وأنماط الحظر وخيارات الألوان المخصصة التحكم الكامل في كيفية ظهور التعليمات البرمجية الخاصة بك.

بفضل هذه التحسينات، يمكنك التركيز بشكل أقل على التنسيق والمزيد على كتابة محتوى رائع يساعد القراء على التعلم والبناء.