مختار ثيم كود بلوك

:discourse2: ملخص سيمكنك مُختار سمة كتل الكود من تغيير السمة المستخدمة في كتل الكود بسهولة.
:eyeglasses: معاينة معاينة على منشئ سمات ديسكوس
:hammer_and_wrench: رابط المستودع https://github.com/discourse/hljs-theme-picker
:open_book: جديد في سمات ديسكوس؟ دليل المبتدئين لاستخدام سمات ديسكوس

تثبيت مكون السمة هذا

الميزات

هذه مجرد مجموعة صغيرة من الخيارات المتاحة. يتضمن هذا المكون جميع الخيارات الـ 90 المقدمة في مستودع hljs.

:information_source: على الرغم من تضمين جميع الخيارات في هذا المكون، إلا أنه سيحمل فقط الخيار الذي تختاره. لذا، لا يوجد أي عبء إضافي.

كيفية استخدامه

نظرًا لطريقة ربط هذا المكون، سيتطلب ذلك إجراء تغييرًا بسيطًا على أحد إعدادات موقعك.

  1. انتقل إلى your.site.com/admin/site_settings/
  2. ابحث عن theme_authorized_extensions
  3. أضف css إلى تلك القائمة.

مثل هذا:

:warning: يجب عليك القيام بذلك قبل تثبيت المكون، وإلا فلن يعمل.

بمجرد الانتهاء من ذلك، يمكنك تثبيت المكون مثل أي مكون آخر.

الإعدادات

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

إذا كنت بحاجة إلى معرفة مظهر الخيارات، فراجع هنا We're not a CDN - highlight.js

بمجرد اتخاذ قرار بشأن سمة hljs للاستخدام، يمكنك البحث في القائمة المنسدلة عن السمة المطلوبة وحفظ الإعداد. ستحتاج إلى تحديث الصفحة لكي يبدأ كل شيء في العمل.

الشكر والتقدير

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


:discourse2: مستضاف لدينا؟ تتوفر مكونات السمات للاستخدام في خططنا القياسية، والتجارية، وخطط المؤسسات.

42 إعجابًا

This theme is very useful and running in my site for a long time. How ever I suddenly found it has a problem on firefox. The custom css file blocked by the following header X-Content-Type-Options: nosniff. Console shows that css file MIME type is text/html. No matter which theme I choise the problem still happen on firefox but chrome is fine.

This super theme component would be even better if the selected codeblock style was also selectable as a user preference.

5 إعجابات

أوافق. سيكون من الرائع جدًا أن يكون ذلك حسب تفضيلات المستخدم.

هل هناك طريقة لعرض أرقام الأسطر؟

مكون سمة رائع.

سؤال واحد: هناك 242 سمة في عرض highlight.js التوضيحي. على سبيل المثال، “Github Dark Dimmed” كما في الصورة المرفقة.

هل توجد طريقة لحل هذه المشكلة؟ شكراً لنصيحتكم.

للأسف، هذا الأمر معقد بعض الشيء.

يعمل Discourse بإصدار 10.6.0 من highlight-js. معظم السمات الإضافية المفقودة حاليًا - مثل base16 - تتطلب الإصدار 11.0.

المشكلة هي أن هذا الإصدار يُدخل بعض التغييرات المكسرة والإلغاءات. اطلع هنا:

Release Version 11 · highlightjs/highlight.js · GitHub

لذا، هذا يعني أن الخيارات الحالية ستبقى كما هي لفترة من الوقت. أولاً، يجب تحديث إصدار highlight-js في tests-passed في Discourse. ثم سنحتاج إلى الانتظار حتى صدور إصدار مستقر. تحديث السمات (حتى السمات الحالية) سيضعنا في حالة صعبة حيث سيكون من الصعب التكهن بما إذا كانت السمة تعمل بشكل صحيح على موقعك أم لا.

4 إعجابات

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

إعجابَين (2)

تأكيد كسر تمييز الصيغة هنا أيضًا في أحدث إصدار تجريبي

@Falco قام بدمج إصلاح لهذه المكون: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

يتضمن تحديثًا لسمات highlight.js الإصدار 11 (تم تحديث النواة هنا إلى highlight.js الإصدار 11 أيضًا) وإصلاحات للأنماط التي تفتقر إلى الخصوصية الصحيحة.

إعجابَين (2)

لقد تلقيت هذا الخطأ عند محاولة تثبيت المكون

خطأ في إنشاء أصل التحميل: a11y-dark. اسم الملف الأصلي عذرًا، الملف الذي تحاول تحميله غير مصرح به (الامتدادات المصرح بها: wasm، jpg، jpeg، png، woff، woff2، svg، eot، ttf، otf، gif، webp، avif، js).

هل قمت بهذا الجزء :point_down:

إعجاب واحد (1)

أوه لا، سأفعل ذلك :hugs:

إعجاب واحد (1)

يسعدني وجود مكون السمة هذا! ألاحظ أن الإعداد hljs dark match لا يبدو أنه يعمل.

على سبيل المثال، لدينا hljs theme مضبوط على atom-one-light (والذي يوجد له أيضًا atom-one-dark).

عند التحديث، يعمل atom-one-light أثناء الوضع المظلم، لكن كتلة التعليمات البرمجية لا تتحول إلى الوضع المظلم عند التبديل إلى الوضع المظلم - بل تبقى فاتحة.


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

هل أضفت css إلى قائمة ملحقات الثيمات المسموح بها؟

إعجاب واحد (1)

شكرا لك، لقد نجح الأمر ^^

إعجاب واحد (1)

ملاحظة:

يجب أن يكون:

يبدو أن مكون السمة هذا معطل في أحدث إصدار.

لقد أضفت بالفعل css إلى الإعداد theme_authorized_extensions وحاولت إعادة تثبيت المكون، ولكن أنماط الكتل البرمجية لا تزال لا تُطبق.

هل يمكنك التحقق من ذلك؟ شكرًا.