مشكلة في تنسيق كتلة الشفرة في Discourse – النص الأحمر والتسليط الضوئي غير المقصود

[alex10 (Alex)]

أواجه مشكلة في تنسيق كتل التعليمات البرمجية في Discourse. عند نشر تعليمات برمجية بلغة Python، يتم تمييز أجزاء معينة من التعليمات البرمجية (مثل عناوين URL والمسارات) باللون الأحمر أو تنسيقها بشكل غير متوقع، كما هو موضح في لقطة الشاشة أدناه:

وصف المشكلة

• عند نشر تعليمات برمجية بلغة Python باستخدام علامات الاقتباس الثلاثية لكتل التعليمات البرمجية، يتم تمييز أجزاء معينة من النص (مثل الشرطات السفلية في عناوين URL أو المسارات) باللون الأحمر أو تنسيقها بشكل خاطئ.
• لقد حاولت الهروب من الأحرف، واستخدام كيانات HTML، وإزالة تمييز الصيغة عن طريق عدم تحديد اللغة، ولكن المشكلة لا تزال قائمة.

مثال على التعليمات البرمجية

إليك مقتطف من التعليمات البرمجية التي تسبب المشاكل (Python):

import degirum as dg
zoo = dg.connect(dg.CLOUD, “https://cs.degirum.com”, “”)
model = zoo.load_model(“mobilenet_v2_ssd_coco–300x300_quant_n2x_orca_1”)
result = model(“https://docs.degirum.com/images/samples/TwoCats.jpg”)
display(result.image_overlay)

ما جربته

• الهروب من الشرطات السفلية بشرطة مائلة عكسية.
• استخدام كيانات HTML لاستبدال الشرطات السفلية.
• إزالة تمييز الصيغة عن طريق عدم تحديد python في كتلة التعليمات البرمجية.
• نشر التعليمات البرمجية كنص عادي بدون أي تنسيق.

معلومات الإعدادات

• ضمن الإعدادات، هذه هي اللغات المميزة:
• bash, c, cpp, csharp, css, diff, go, graphql, ini, java, javascript, json, kotlin, lua, makefile, markdown, objectivec, perl, php, php-template, plaintext, python, python-repl, r, ruby, rust, scss, shell, sql, swift, typescript, xml, yaml, wasm

طلب الدعم

• هل واجه أي شخص آخر هذه المشكلة؟
• هل هناك طريقة موصى بها لمنع Discourse من تفسير أجزاء من التعليمات البرمجية بشكل خاطئ؟
• هل هناك أي إعدادات أو تكوينات يجب علي التحقق منها قد تؤثر على عرض كتل التعليمات البرمجية؟

[bryce (Bryce Huhtala)]

لست على دراية بنظام تمييز الصيغة / الإعدادات ككل، ولكن إذا كنت ترغب فقط في التخلص من النص الأحمر، يمكنك استخدام CSS في سمة موقعك:

code.language-python span {
    color: inherit;
}

يُستخدم اللون الأحمر للإشارة إلى السلاسل النصية، لذلك إذا كنت ترغب فقط في تغييرها إلى لون مختلف، يمكنك القيام بشيء مثل هذا:

code.language-python span.hljs-string {
    color: #FFF; /* استبدل باللون المقصود */
}

بخلاف النص الأحمر، هل كانت هناك أجزاء أخرى يتم تنسيقها بشكل خاطئ؟

[alex10 (Alex)]

شكراً لاقتراحك يا @bryce! سأحاول تعديل CSS في سمة موقعنا لمعالجة مشكلة النص الأحمر.

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

هل هناك طريقة لضمان عرض الرمز بخط أحادي المسافة، مشابه للخط في هذا المثال؟

بخلاف ذلك، لم ألاحظ أي مشاكل تنسيق رئيسية أخرى، لكنني سأستمر في الاختبار وسأعلمك إذا ظهر أي شيء آخر.

شكراً جزيلاً مرة أخرى على مساعدتك!

[bryce (Bryce Huhtala)]

يمكن تغيير ألوان التمييز عن طريق تجاوز متغيرات CSS هذه:

1. --hljs-comment: يُستخدم لتعليقات الكود
2. --hljs-number: يُستخدم لقيم الأرقام في الكود
3. --hljs-string: يُستخدم لقيم السلاسل النصية في الكود
4. --hljs-literal: يُستخدم للقيم الحرفية في الكود
5. --hljs-tag: يُستخدم لوسوم HTML/XML
6. --hljs-attribute: يُستخدم للسمات في وسوم HTML/XML
7. --hljs-symbol: يُستخدم للرموز في الكود
8. --hljs-bg: يُستخدم للون خلفية كتل الكود
9. --hljs-builtin-name: يُستخدم لأسماء الدوال المضمنة

على سبيل المثال، لتجاوز لون السلسلة النصية:

:root {
   --hljs-string: pink;
}

يبدو أن hljs (مكتبة التمييز المستخدمة) قد لا تدعم تمييز معرفات بايثون مثل degirum في مثالك، ولكن يجب أن تكون قادرًا على الاقتراب بشكل كبير عن طريق تغيير الألوان الأخرى.

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

[alex10 (Alex)]

للتوضيح فقط، نحن نستخدم حاليًا السمة الافتراضية (Default theme) بدون أي مكونات إضافية، لذلك من الغريب ألا يتم تطبيق الخط أحادي المسافة (monospace) افتراضيًا على كتل التعليمات البرمجية. لا يبدو أن هناك أي شيء يتجاوزها.

للمرجع، أعمل من Chrome الإصدار 127.0.6533.100 على macOS 14.6.1.

[Moin]

هل يمكنك إعادة إنتاج المشكلة على try.discourse.org؟

حاولت، لكن الروابط لم يتم تمييزها.

[alex10 (Alex)]

لقد اختبرت الكود على try.discourse.org، وتظهر النتائج في لقطة الشاشة أدناه:

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

لست متأكدًا من سبب حدوث هذا التباين.

للمرجع، هنا رابط الصفحة في مجتمعنا.

[Jagster (Jakke Lehtonen)]

وضع الأمان يبدو جيدًا، على ما أعتقد. من ناحية الخطوط على أي حال.

إذًا المشكلة هي بعض المكونات الإضافية أو السمات أو المكونات هناك.

[Moin]

@alex10

لقد اختبرت الكود على try.discourse.org ، وتظهر النتائج في لقطة الشاشة أدناه:

هذا تمييز جافا

وفي منتداك إنه makefile

هناك دليل حول Selecting the programming language used in code blocks
يمكنك أيضًا اختيار لغة افتراضية في إعدادات الموقع

تم التقاط لقطة الشاشة في منتداك بدون الوضع الآمن، لذا بالنسبة لي الخط هو monospace.

[alex10 (Alex)]

شكراً لكما على تخصيص الوقت لمساعدتي في هذا الأمر. من الجيد معرفة أن الخط يظهر كخط أحادي المسافة للآخرين.

نظرًا لأنه لا يتم عرضه بشكل صحيح من جهتي، فقد تكون هناك مشكلة خاصة بإعداداتي أو بيئتي. إنه لا يظهر بشكل صحيح بالنسبة لي على كل من Chrome و Safari (كلاهما أحدث الإصدارات). كما أنه لا يظهر بشكل صحيح للآخرين في مؤسستي على أجهزة الكمبيوتر الشخصية.

[alex10 (Alex)]

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

يبدو أن هذا يستبعد وجود مشكلة في إعدادي الأساسي، حيث أن المشكلة ثابتة عبر أجهزة مختلفة.

[Moin]

هل جربت تعطيل تخصيصات السمات باستخدام الوضع الآمن؟

https://community.degirum.com/t/pysdk-quick-start-guide/71?safe_mode=no_themes

[alex10 (Alex)]

لقد تحققت للتو في الوضع الآمن، ويبدو أن المشكلة قد تم حلها هناك - يظهر خط الكود كخط أحادي المسافة، ويتم تمييز الروابط بشكل صحيح.

هذا مربك لأننا نستخدم السمة الافتراضية بدون مكونات إضافية، لذلك لست متأكدًا مما قد يسبب المشكلة في الوضع العادي.

[alex10 (Alex)]

إليك إعدادات السمة الافتراضية لدينا:

[pfaffman (Jay Pfaffman)]

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

أعتقد أنك قد ترغب فقط في تغيير SiteSetting.default_code_lang إلى “text” أو “”. هناك أيضًا إعداد highlighted_languages. أنا متأكد من أنهم هنا قاموا بتغيير لغة الكود الافتراضية إلى شيء مثل النص، لذا

يبدو هذا هكذا:

result=model("https://big.bang")

وإذا أجبرته باستخدام ```python فيبدو هكذا

result=model("https://big.bang")

[alex10 (Alex)]

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

إليك لغاتنا المميزة:

[alex10 (Alex)]

هذا ما يبدو عليه في محرر النصوص الخاص بي:

[Moin]

عندما نظرت، اعتقد الكشف التلقائي أنه makefile، وليس python.

@Moin

وفي منتدى الخاص بك هو makefile

هل أضفت لغة البرمجة إلى كتلة التعليمات البرمجية في مشاركاتك؟

[alex10 (Alex)]

هذا ما يبدو عليه الأمر عند إضافة python إلى كتلة التعليمات البرمجية:

نظرًا لأنني أدير المجتمع، فإن هدفي هو أن أتمكن من رؤيته كما ينبغي أن يراه المستخدمون النهائيون. كما ترى على الجانب الأيمن، فإنه لا يبدو صحيحًا.

[Moin]

ماذا أضفت في CSS المشترك؟