كيفية تغيير الألوان الافتراضية لكتل الكود المتوفرة؟

على سبيل المثال، هذا هو كود Swift

func jjj () {

let jj: String = "1"
}

أريده أن يكون ملونًا مثل التالي،

تتم إضافة اللون بناءً على اللغة. يمكنك التحقق مما إذا كانت Swift مضافة في highlighted_languages وإذا كان الاكتشاف لا يزال لا يعمل، يمكنك أيضًا تعيين اللغة يدويًا لمقطع برمجي.

إعجابَين (2)

تنسيق الكتلة البرمجية جيد، فقد تمت إضافته كـ (بدون علامتي الاقتباس)

" swift [الكود هنا] "

يتم تمييزه على النحو التالي، ولكن المشكلة هي اللون الذي يوفره، لا يعجبني. يتم تمييزه كما يلي. (انظر اللون الأحمر “jjj”، أريده باللون الأزرق.

ولكنني أريد شيئًا مثل ما يلي

هل من الممكن تعديل ملف وما إلى ذلك عبر الطرفية؟ حتى أتمكن من تغيير الألوان الافتراضية المخصصة للغة معينة؟

تتم اللغات المكتشفة من خلال إعداد موقع: highlighted languages.

تندرج Swift في القائمة افتراضيًا ولكنها لا تندرج في meta.

اللغات المدعومة من قبل هذه المكتبة الخارجية مدرجة هنا:

تعديل: كما هو موضح هنا :face_with_peeking_eye:

@PrettyGirl، نصيحة markdown: يمكنك الهروب من backticks من كتلة التعليمات البرمجية عن طريق تغليف التعليمات البرمجية الخاصة بك بأربعة backticks بدلاً من ثلاثة :slight_smile:

``` swift

[code here]
```
إعجابَين (2)

مرحباً :waving_hand:
يمكنك أيضاً محاولة تغيير الألوان باستخدام مكون السمة هذا :slightly_smiling_face:

4 إعجابات

شكراً على النصيحة والرابط. ومع ذلك، فإن إعداد الموقع highlighted languages يتضمن swift. يتم تمييزه، لكنني لا أحب الألوان التي يتم تمييزها حاليًا. هل هناك أي طريقة أخرى؟ تعديل highlight.js داخل مجلد discourse وما إلى ذلك؟ يجب أن تكون هناك طريقة، أليس كذلك، لاحظت أن highlight.js مفتوح المصدر أيضًا.

هل يتم شحن Discourse مع highlight.js افتراضيًا؟

أوه، أنا آسف لذلك، لقد أخطأت في قراءة موضوعك. :person_facepalming:

نعم :slight_smile:

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

هل جربت مكون السمة الذي نشره beeper في رسالتك الأخيرة؟

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

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

يمكنك استهداف لغات البرمجة بشكل منفصل وتجاوز الكشف التلقائي عن اللغة كما هو مذكور في المشاركات أعلاه.

إذا كنت تريد استهداف swift، يمكنك القيام بذلك باستخدام فئة .language-swift. لكي تكون أكثر تحديدًا… code.hljs.language-swift. ويمكنك تغيير ألوان swift في CSS.

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

المشكلة في هذه الألوان هي صعوبة قراءتها في الوضع المظلم. لهذا السبب يوجد في صفحة العرض التوضيحي لـ highlight.js خلفية بيضاء وأعتقد أن هذا هو السبب في أن Discourse تستخدم مجموعة الألوان الافتراضية العامة للغات. إذا كنت أتذكر بشكل صحيح، كانت هناك بعض التقارير في الماضي حول صعوبة القراءة في الوضع المظلم وما إلى ذلك…


لتغييرها إلى swift فقط، عليك إنشاء مكون سمة جديد أو إضافته إلى مكون موجود. ملاحظة: سيتم استخدام هذه الألوان في الوضع المظلم أيضًا (خلفية بيضاء وما إلى ذلك)، لذا إذا كنت تريد ألوانًا مختلفة في الوضع المظلم، فعليك إنشاء تعريفات ألوان جديدة dark-light-choose().

عام / CSS

code.hljs.language-swift {
  background: #fff;
  color: #000;

  .xml .hljs-meta {
    color: silver;
  }

  .hljs-comment,
  .hljs-quote {
    color: #007400;
  }

  .hljs-attribute,
  .hljs-keyword,
  .hljs-literal,
  .hljs-name,
  .hljs-selector-tag,
  .hljs-tag {
    color: #aa0d91;
  }

  .hljs-template-variable,
  .hljs-variable {
    color: #3f6e74;
  }

  .hljs-code,
  .hljs-meta .hljs-string,
  .hljs-string {
    color: #c41a16;
  }

  .hljs-link,
  .hljs-regexp {
    color: #0e0eff;
  }

  .hljs-bullet,
  .hljs-number,
  .hljs-symbol,
  .hljs-title {
    color: #2b75a6;
  }

  .hljs-meta,
  .hljs-section {
    color: #643820;
  }

  .hljs-built_in,
  .hljs-class .hljs-title,
  .hljs-params,
  .hljs-title.class_,
  .hljs-type {
    color: #442fa1;
  }

  .hljs-attr {
    color: #836c28;
  }

  .hljs-subst {
    color: #000;
  }

  .hljs-formula {
    background-color: #eee;
    font-style: italic;
  }

  .hljs-addition {
    background-color: #baeeba;
  }

  .hljs-deletion {
    background-color: #ffc8bd;
  }

  .hljs-selector-class,
  .hljs-selector-id {
    color: #9b703f;
  }

  .hljs-doctag,
  .hljs-strong {
    font-weight: 700;
  }

  .hljs-emphasis {
    font-style: italic;
  }
}

قبل

بعد

5 إعجابات

تمت إضافة Theme component إلى Theme الذي تستخدمه بالفعل. لذا فهو لا يغير المظهر بالكامل، بل يضيف أو يغير شيئًا محددًا. لذا فإن مكون الكود المخصص يغير مظهر الكود فقط

5 إعجابات

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

3 إعجابات

رائع، شكراً جزيلاً. لقد نجح الأمر :slight_smile:

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.