أرقام الأسطر في كتلة التعليمات البرمجية

[Lilly (Lillian)]

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

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

الوصف

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

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

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

الوضع الداكن، مع العنوان:

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

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

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

الإعداد	الوصف
code-block header title	يضيف عنوان نصي رئيسي إلى كتل الأكواد قبل لغة الكود إذا تم تحديدها (اتركه فارغًا لعدم الإضافة)
code-block text size	حجم النص بالبكسل لكتل الأكواد (اتركه فارغًا للافتراضي)

---

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

[Jagster (Jakke Flemming)]

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

[Lilly (Lillian)]

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

[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)]

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)]

@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)]

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

[Lilly (Lillian)]

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

[Lilly (Lillian)]

تم تحديث هذه المكونة مرة أخرى - لقد أصلحت خطأ حيث كان العنوان يظهر في رسوم 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)]

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