Je rencontre un problème avec le formatage des blocs de code dans Discourse. Lors de la publication de code Python, certaines parties du code (comme les URL et les chemins) sont mises en surbrillance en rouge ou formatées de manière inattendue, comme le montre la capture d’écran ci-dessous :
Lorsque je publie du code Python en utilisant des triples backticks pour les blocs de code, des parties spécifiques du texte (comme les underscores dans les URL ou les chemins) sont mises en surbrillance en rouge ou mal formatées.
J’ai essayé d’échapper les caractères, d’utiliser des entités HTML et de supprimer la coloration syntaxique en ne spécifiant pas la langue, mais le problème persiste.
Exemple de code
Voici un extrait du code qui pose problème (Python) :
Je ne connais pas le système de coloration syntaxique / les paramètres dans leur ensemble, mais si vous voulez simplement vous débarrasser du texte rouge, vous pouvez utiliser du CSS dans le thème de votre site :
code.language-python span {
color: inherit;
}
Le rouge est utilisé pour indiquer les chaînes de caractères, donc si vous vouliez simplement le changer en une autre couleur, vous pourriez faire quelque chose comme ceci :
code.language-python span.hljs-string {
color: #FFF; /* Remplacez par la couleur souhaitée */
}
Outre le texte rouge, y avait-il d’autres parties qui étaient mal formatées ?
Merci pour votre suggestion, @bryce ! Je vais essayer d’ajuster le CSS du thème de notre site pour résoudre le problème du texte rouge.
Je vais essayer d’ajuster le CSS du thème de notre site pour résoudre le problème du texte rouge.
Je pense que le problème majeur est que la police de mon capture d’écran d’origine n’est pas formatée pour ressembler à du code — elle manque du style de police à chasse fixe qui est généralement utilisé pour les blocs de code. Idéalement, j’espérais que le code apparaisse davantage comme ceci, avec la police et la couleur de police appropriées :
Y a-t-il un moyen de s’assurer que le code est affiché dans une police à chasse fixe, similaire à celle de cet exemple ?
En dehors de cela, je n’ai pas remarqué d’autres problèmes de formatage majeurs, mais je continuerai à tester et je vous ferai savoir si autre chose se présente.
Les couleurs de surbrillance peuvent être modifiées en remplaçant ces variables CSS :
--hljs-comment : Utilisé pour les commentaires de code
--hljs-number : Utilisé pour les valeurs numériques dans le code
--hljs-string : Utilisé pour les valeurs de chaîne dans le code
--hljs-literal : Utilisé pour les valeurs littérales dans le code
--hljs-tag : Utilisé pour les balises HTML/XML
--hljs-attribute : Utilisé pour les attributs dans les balises HTML/XML
--hljs-symbol : Utilisé pour les symboles dans le code
--hljs-bg : Utilisé pour la couleur d’arrière-plan des blocs de code
--hljs-builtin-name : Utilisé pour les noms de fonctions intégrées
Par exemple, pour remplacer la couleur des chaînes de caractères :
:root {
--hljs-string: pink;
}
Il semble que hljs (la bibliothèque de mise en surbrillance utilisée) ne prenne peut-être pas en charge la mise en surbrillance des identifiants Python comme degirum dans votre exemple, mais vous devriez pouvoir vous en approcher en modifiant les autres couleurs.
Pour la police, c’est étrange : les blocs de code devraient apparaître par défaut avec une police monospace. Je vous suggère de vérifier à nouveau votre thème pour vous assurer que rien n’est remplacé.
Pour clarifier, nous utilisons actuellement le thème par défaut sans composants supplémentaires, il est donc étrange que la police monospace ne soit pas appliquée par défaut aux blocs de code. Rien ne semble la remplacer.
Pour référence, je travaille sur Chrome version 127.0.6533.100 sur macOS 14.6.1.
La police semble correcte et les liens sont mis en surbrillance comme prévu. Cependant, je rencontre toujours le problème dans notre communauté où la police ne s’affiche pas correctement et les liens ne sont pas mis en surbrillance comme ils le devraient.
Je ne suis pas sûr de la raison de cette divergence.
Pour référence, voici le lien vers la page de notre communauté.
Merci à tous les deux d’avoir pris le temps de m’aider. C’est bon de savoir que la police s’affiche en chasse fixe pour les autres.
Comme elle ne s’affiche pas correctement de mon côté, il pourrait s’agir d’un problème spécifique à ma configuration ou à mon environnement. Elle s’affiche incorrectement pour moi sur Chrome et Safari (tous deux dans leurs dernières versions). Elle s’affiche également incorrectement pour d’autres personnes de mon organisation sur des PC.
J’ai juste vérifié depuis un ordinateur personnel, et le problème persiste également. La police de code ne s’affiche toujours pas en chasse fixe, et les liens ne sont pas mis en surbrillance correctement.
Cela semble exclure un problème avec ma configuration principale, car le problème est cohérent sur différents appareils.
J’ai juste vérifié en mode sans échec, et le problème semble résolu là-bas : la police de code apparaît en chasse fixe et les liens sont mis en surbrillance correctement.
C’est déroutant car nous utilisons le thème par défaut sans composants supplémentaires, donc je ne suis pas sûr de ce qui pourrait causer le problème en mode normal.
C’est ce à quoi je m’attendrais. Ces chaînes de caractères sont d’une couleur différente pour que vous puissiez rapidement voir qu’il s’agit de chaînes de caractères. N’est-ce pas à cela que cela ressemble dans votre éditeur de texte ?
Je pense que vous voudrez peut-être simplement changer SiteSetting.default_code_lang en « text » ou « ». Il existe également un paramètre highlighted_languages. Je suis à peu près sûr qu’ici, ils ont changé la langue de code par défaut en quelque chose comme text, donc
Cela ressemble à ceci :
result=model("https://big.bang")
et si je le force avec ```python, alors cela ressemble à ceci
Comme je gère la communauté, mon objectif est de pouvoir la voir telle que les utilisateurs finaux devraient la voir. Comme vous pouvez le voir sur le côté droit, cela ne rend pas bien.
