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

Par exemple, voici du code Swift

func jjj () {

let jj: String = "1"
}

Je veux qu’il soit coloré comme suit,

La couleur est ajoutée en fonction de la langue. Vous pouvez vérifier si Swift est ajouté dans highlighted_languages et si la détection ne fonctionne toujours pas, vous pouvez également définir manuellement la langue pour un bloc de code.

2 « J'aime »

Le formatage du bloc de code est correct, il a été ajouté comme (sans les « »)

« ``` swift

[code ici]
»

Il est mis en surbrillance comme suit, mais le problème est la couleur qu’il fournit, je ne l’aime pas. Il est mis en surbrillance comme ci-dessous. (voir la couleur rouge « jjj », je veux qu’elle soit en bleu.

Mais je veux quelque chose comme ceci

Est-il possible de modifier un fichier, etc. via le terminal ? afin que je puisse changer les couleurs par défaut attribuées à une langue spécifique ?

Les langues détectées sont définies par un paramètre du site : highlighted languages.

Swift appartient à la liste par défaut mais pas sur meta.

Les langues prises en charge par cette bibliothèque tierce sont listées ici :

edit : comme expliqué ici :face_with_peeking_eye:

@PrettyGirl, astuce markdown : vous pouvez échapper les backticks d’un bloc de code en encapsulant votre code avec quatre backticks au lieu de trois :slight_smile:

``` swift

[code here]
```
2 « J'aime »

Bonjour :waving_hand:
Vous pouvez également essayer de changer les couleurs avec ce composant de thème :slightly_smiling_face:

4 « J'aime »

Merci pour le conseil et le lien. Cependant, le réglage du site highlighted languages inclut swift. Il est mis en surbrillance, mais je n’aime pas les couleurs actuellement utilisées pour la mise en surbrillance. Y a-t-il un autre moyen ? Modifier highlight.js dans le dossier discourse, etc. ? Il doit y avoir un moyen, n’est-ce pas ? J’ai remarqué que highlight.js est également open source.

Discourse est livré avec highlight.js par défaut ?

Oh, désolé pour ça, j’ai mal lu votre sujet. :person_facepalming:

Oui :slight_smile:

1 « J'aime »

Avez-vous essayé le composant de thème publié par beeper dans votre dernier message ?

1 « J'aime »

Je ne l’ai pas fait, car je ne sais pas à quoi ressembleront les autres zones (dans toute l’application Discourse) si j’applique d’autres thèmes. J’aime l’apparence et les paramètres actuels, mais il y a juste quelques problèmes par-ci par-là. Si le thème change l’apparence ou les paramètres, etc., en plus de fournir de jolis blocs de code, cela n’en vaut pas la peine. Je dois juste résoudre ce problème spécifique.

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.

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

5 « J'aime »

Un Theme component est ajouté au Theme que vous utilisez déjà. Il ne change donc pas l’apparence générale, il ajoute ou modifie quelque chose de spécifique. Ainsi, le composant de code personnalisé ne modifie que l’apparence du code.

5 « J'aime »

La description indique que cela ne change que les blocs de code, ce qui est exactement ce que vous voulez faire.
Veuillez lire les liens sur le fonctionnement des thèmes que d’autres ont suggérés.

3 « J'aime »

Génial, merci beaucoup. Ça fonctionne :slight_smile:

1 « J'aime »

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