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

[Don]

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

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

@PrettyGirl

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

لقد تحققت من هذا ويبدو أن هذا قريب من سمة 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;
  }
}

قبل

بعد