أرقام أسطر الكود بلوك

[Lilly (Lillian Louis)]

	ملخص	يضيف أرقام الأسطر إلى كتل التعليمات البرمجية متعددة الأسطر في المشاركات
	معاينة	معاينة على منشئ سمات Discourse
	مستودع	https://github.com/Lillinator/code-block-line-numbers
	دليل التثبيت	كيفية تثبيت سمة أو مكون سمة
	جديد في سمات Discourse؟	دليل المبتدئين لاستخدام سمات Discourse

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

الوصف

هذا مكون سمة بسيط يضيف أرقام الأسطر إلى كتل التعليمات البرمجية في مشاركات Discourse. لن يضيف أرقام أسطر للتعليمات البرمجية المضمنة، أو الكتل التي تقل عن سطرين، أو لكتل التعليمات البرمجية المقتبسة. كما أنه يتجاهل التعليمات البرمجية لـ Github onebox. بالإضافة إلى ذلك، سيسمح لك المكون بتغيير حجم الخط وإضافة عنوان رأس يظهر قبل لغة التعليمات البرمجية (إذا تم تحديده بعد السياج الأول للتعليمات البرمجية).

بفضل @Don على العمل الرائع في هذا أيضًا.

يعمل في العرض المكتبي والجوال.

الوضع المظلم، مع العنوان:

الوضع الفاتح، بدون عنوان - في المعاين:

نتيجة المشاركة:

هناك إعدادان.

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

---

ملاحظة: إذا كنت تستخدم CSS لتغليف كتل التعليمات البرمجية على منتداك، فسيقوم هذا المكون بحساب الغلاف.

[Jagster (Jakke Lehtonen)]

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

[Lilly (Lillian Louis)]

نعم، لا، إنها لا تعمل في الكتل البرمجية المقتبسة.

[hoangphuctran93 (Hoàng Phúc Trần)]

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

هذه هي الحالة عندما تستخدم صفحة المناقشة سمة فاتحة وكتلة التعليمات البرمجية مضبوطة للعرض بأسلوب GitHub الداكن

---

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

/*CSS Codeblock like terminar macos*/
.codeblock-buttons {
    box-shadow: 0px 0px 10px rgba(0,0,0,.4);
    border-radius: 7px 7px 0 0;
    display: flex;
    flex-direction: column;
    &:before{
        content:'Business Lab';
        display: grid;
        justify-content: center;
        font-family: var(--d-font-family--monospace);
        font-weight: bold;
        padding: 5px;
        background-color: #E8E6E8;
        color: black;
        order:1;
    }
    &:after{
        content:"";
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 15px;
        margin-left: 2px;
        border-width: 1px;
        border-style: solid;
        background: #EC6A5F;
        border-color: #D04E42;
        order:2;
        position: absolute;
        top: 10px;
        left: 5px;
    }
    & .codeblock-button-wrapper{
        right: .5rem !important;
        top: .25em !important;
        order:3;
        width: 100%;
        &:before{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #F5C04F;
            border-color: #D6A13D;
            position: absolute;
            top: 6.5px;
            left: 30px;
        }
        &:after{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #64CC57;
            border-color: #4EA73B;
            position: absolute;
            top: 6.5px;
            left: 48px;
        }
        & .btn.nohighlight{
            padding: .7em;
            float: right;
            &.copy-cmd{
                position: absolute;
                right: 0px;
            }
            &.fullscreen-cmd{
                position: absolute;
                right: 3.2em;
            }
            &.copy-cmd:not(.action-complete), &.fullscreen-cmd:not(.action-complete){
                opacity: 1;
                visibility: visible;
            }
        }
    }
    & code{
        order:4;
    }
}

/*CSS Discourse Code Block Line Numbers*/
code{
    &.lines-decorator{
        padding: 0px;
        &.lines-shadow{
            background-image: linear-gradient(to right, var(--github) 25%, transparent), linear-gradient(to left, var(--github) 25%, transparent), linear-gradient(to right, var(--github), transparent), linear-gradient(to left, var(--github), transparent);
        }
        &.lines-number:not(.lines-count-1):not(.lines-in-quote) span.lines-line::before{
            background-color: #263238;
            color: rgba(233, 237, 237, 1);
        }
    }

}

يمكنك الرجوع إلى المزيد هنا.

[Lilly (Lillian Louis)]

Codeblock Theme Picker

Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/hljs-theme-picker New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features [Some examples of the colors available] This is just a handful of the available options. This component incl…

[robbie.morrison]

هل هناك أي فرصة لإضافة هذه الميزة إلى خط discourse الرئيسي؟ خطة الاستضافة ذات الميزانية التي أستخدمها لا تدعم الإضافات الاختيارية وما شابه ذلك. ويبدو هذا مفيدًا جدًا. شكري لـ @Lilly والمطورين والمختبرين الآخرين.

[merefield (Robert)]

إنه ليس مكونًا إضافيًا. إنه مكون سمة. لا أعتقد أنك مقيد من استخدام مكونات السمات؟

[robbie.morrison]

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

[robbie.morrison]

هذه بالفعل مسألة للمسؤولين! ذهبت إلى https://meta.discourse.org/t/code-block-line-numbers/330130، ونقرت على الزر الأزرق “تثبيت مكون السمة هذا”، وأدخلت اسم المنتدى الخاص بي، ثم أكدت هذا الإجراء من واجهة المنتدى الخاص بي. حتى الآن كل شيء على ما يرام.

تم إدراج هذه الميزة بعد ذلك كمكون (أعتقد أنها تقنيًا مكون سمة) وتقارير الإصدار 0.0.2. لكن الحوار يشير إلى أن هذه القطعة الأثرية تعتبر حاليًا “مكونًا غير مستخدم”. ولم تؤدِ التجارب البسيطة باستخدام بناء الجملة ``` الثلاثي إلى عرض أرقام الأسطر.

هل هناك شيء آخر أحتاج إلى القيام به؟ شكرًا مقدمًا.

[Lilly (Lillian Louis)]

@robbie.morrison يرجى قراءة المنشور الرئيسي (المنشور الأول في هذا الموضوع) لأنه يحتوي على جميع المعلومات التي تحتاجها، وكذلك الرجوع إلى هذه التعليمات إذا كنت تقوم بتثبيت مكونات السمات على نسختك.

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

[merefield (Robert)]

@robbie.morrison

هل هناك شيء آخر أحتاج إلى القيام به؟

نعم. أضف المكون إلى سمة (سمات) (وإلا فسيظل “غير مستخدم”) وقم بتنشيط السمة إذا لم تكن نشطة بالفعل.

[robbie.morrison]

@merefield @Lilly شكراً جزيلاً. احتجت إلى إضافة مكون السمة هذا إلى السمة “الافتراضية” الخاصة بي. كما هو موضح هنا: إضافة مكونات إلى سمة. وهي تعمل (مع ملاحظة أنني أضفت لقطة الشاشة الخاطئة في وقت سابق):

بعض التعليقات حول التوثيق. الموقع الصحيح، أعتقد، هو: المكونات ⏵ تخصيص ⏵ السمات. ويبدو القسم الخاص بالإضافة إلى السمات (انظر الرابط أعلاه) أكثر تقديرًا مما هو عليه في الواقع. ربما تكون هذه الصياغة أفضل: “ستحتاج إلى إضافة مكون السمة الخاص بك صراحةً إلى سمة قبل أن يصبح تشغيليًا. وهذا يشمل السمة “الافتراضية”.”

شكراً للجميع على اهتمامهم ووقتهم. لدي أيضًا تقرير خطأ صغير لمشاركتي القادمة.

[robbie.morrison]

تقريري عن الخطأ كما وعدت. تم بالفعل ترقيم كتل التعليمات البرمجية التالية من GitHub. بعد تثبيت مكون السمة بعنوان أرقام أسطر كتل التعليمات البرمجية في Discourse، تم تضمين الأسطر الفارغة المتناوبة.

المنشور الأصلي موجود هنا. وجاءت المعلومات عبر عنوان URL بسيط. المزيد حول مخططات Sankey على ويكيبيديا الإنجليزية لمن يهتم!

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

[Lilly (Lillian Louis)]

نعم، مشكلة رقم سطر GitHub. سألقي نظرة لاحقًا هذا الأسبوع عندما يتوفر لدي بعض الوقت وأضع شرطًا هناك. شكرًا!

[Lilly (Lillian Louis)]

لقد أجريت بعض التحسينات على هذه المكونة وأضفت أيضًا بعض الإعدادات لإضافة عنوان رأس إلى كتل التعليمات البرمجية وتغيير حجم الخط. تم إصلاح مشكلات تنسيق Github onebox أيضًا (شكرًا لـ PR @gormus! ). تم تحديث OP وإضافة لقطات شاشة جديدة ورابط لمعاينة منشئ السمة.

[Lilly (Lillian Louis)]

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

أيضًا، قام @Don بإعادة هيكلة لـ js، ونظف بعض التعليمات البرمجية، وأضاف تنسيقًا أجمل، بما في ذلك حدود ولغة التعليمات البرمجية في الرأس إذا تم تحديدها في المنشور. (شكرًا Don ).

تم تحديث وصف OP والصور.

[Yt.w]

مرحباً، هذا المكون الخاص بالموضوع يبلغني عن خطأ كهذا

خطأ: Mixin غير معرف. ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ line-numbers.scss 17:9 @import /var/www/discourse/common.scss 1:570 root stylesheet

[Arkshine]

تمت إزالة المزيج sticky من النواة في طلب سحب حديث.
سأقوم بإنشاء طلب سحب!

---

ها نحن ذا:

DEV: Inline the sticky mixin

[Lilly (Lillian Louis)]

تم الدمج. شكرًا @Arkshine