Comment changer les couleurs par défaut des blocs de code fournis ?

[Don]

Vous pouvez cibler séparément les langages de code et outrepasser la détection automatique des langues, comme mentionné dans les publications ci-dessus.

Si vous souhaitez cibler Swift, vous pouvez le faire avec la classe .language-swift. Pour être plus précis… code.hljs.language-swift. Et vous pouvez modifier les couleurs de Swift dans le CSS.

@PrettyGirl

Je veux que ce soit coloré comme suit,

J’ai vérifié cela et il semble que ce soit proche du thème Xcode. Mais nous allons changer ces deux couleurs pour qu’elles correspondent mieux aux couleurs de code de votre capture d’écran.

Le problème avec ces couleurs est qu’elles sont difficiles à lire en mode sombre. C’est pourquoi la page de démonstration de highlight.js a un fond blanc et je pense que c’est la raison pour laquelle Discourse utilise une combinaison de couleurs génériques par défaut pour les langages. Si je me souviens bien, il y a eu des rapports dans le passé à ce sujet, indiquant qu’il était difficile de lire en mode sombre, etc…

---

Pour le changer uniquement en Swift, vous devez créer un nouveau composant de thème ou l’ajouter à un composant existant. Remarque : ces couleurs seront également utilisées en mode sombre (fond blanc, etc.), donc si vous souhaitez des couleurs différentes en mode sombre, vous devrez créer de nouvelles définitions de couleurs dark-light-choose().

Commun / 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;
  }
}

Avant

Après