Un client Teams demande des blocs de code en ligne qui se démarquent davantage. Actuellement, que vous soyez en mode sombre ou clair, le bloc de code n’est pas très différent en couleur des autres textes. Pourrions-nous modifier la couleur du texte par défaut dans Discourse afin qu’une couleur différente soit utilisée et se démarque davantage, par exemple le rouge ?
Je sais que pour la plupart des clients, ce n’est pas un gros problème car ils peuvent personnaliser le thème pour modifier le CSS de leur site, mais pour Discourse for Teams, ce niveau de personnalisation n’est pas possible. Pendant ce temps, pour les équipes qui discutent de code, il est très important qu’il se démarque et soit très différent des autres textes.
Merci Tobias. Pour mémoire, je suis le client et je tiens à souligner que je parle exclusivement des blocs en ligne. Je n’ai aucune préoccupation concernant les multilignes.
Pour information, si vous êtes un noob en HTML comme moi (j’ai dû chercher) :
<kbd>Fancy!</kbd> est fait avec <code><kbd>Fancy!</kbd></code>
<ins>Ohhhh!</ins> est fait avec <code><ins>Ohhhh!</ins></code>
C’est utile à savoir, merci @tobiaseigen.
Je pense toujours qu’il serait judicieux de modifier le CSS pour ceci également. Nous avons quelques articles techniques qui utilisent beaucoup les backticks, et utiliser les 2 alternatives n’est certainement pas aussi convivial.
Oh, il y a une troisième façon de mettre en évidence qui est également agréable et que j’oublie constamment. Cela ressemble à ceci et se fait en utilisant cette balise HTML <mark>texte</mark>. Il existe un composant de thème contribué par la communauté (non disponible dans Teams) qui vous permet d’utiliser ==texte== à la place, ce qui est très pratique. Je ne le trouve pas immédiatement pour une raison quelconque.
Mais en tout cas, je vais discuter avec mes collègues de la mise à jour du style par défaut des blocs de code afin qu’ils soient plus évidents. Peut-être que le simple fait de rendre la couleur d’arrière-plan du bloc de code plus distinctive sera suffisant.
Le code en ligne a toujours ressemblé à du code normal, dans une police de caractères (monospace) de code. Tout ce qui est vraiment brillant et choquant dépendrait fortement de la communauté, et ne serait certainement pas cohérent avec la façon dont je vois code utilisé dans la plupart des endroits sur le web.
La question de la coloration syntaxique est différente ; il faudrait plusieurs lignes de code pour déterminer la syntaxe que vous traitez. C’était peut-être la racine du problème – si vous voulez la coloration syntaxique, vous avez besoin d’un bloc de code, par exemple
var x, y, z; // Déclarer 3 variables
x = 5; // Assigner la valeur 5 à x
y = 6; // Assigner la valeur 6 à y
z = x + y; // Assigner la somme de x et y à z
document.getElementById("demo").innerHTML =
"La valeur de z est " + z + ".";
Un seul élément code est détaché de tout contexte nécessaire pour effectuer la coloration syntaxique. Vous pourriez cependant faire une seule ligne de JavaScript :
"la valeur de z est " + z + ".";
Ce qui ressemble à
``` javascript
"la valeur de z est " + z + ".";
```
Donc, je suppose qu’il s’agit de blocs de code par opposition à un mot de code.
Je suppose que @jordan.vidrine, il y a des ordres de marche ici. Il suffit de faire une réversion complète du changement. Peut-être créer un composant de thème pour les « styles de code alternatifs », il peut devenir complètement Slack sur le code en ligne et le rendre rouge en tant que composant.
Je pense que la demande ici était vraiment de trouver un moyen simple et rapide de mettre en évidence du texte dans les discussions. Beaucoup de gens (moi y compris) ont pris l’habitude d’utiliser des backticks pour mettre en évidence du texte car c’est super facile… il n’est même pas nécessaire d’appuyer sur la touche Maj, et c’est découvrable dans le menu. Mais ce n’est pas très distinct du reste du texte dans le paragraphe.
Le gras et l’italique sont également dans le menu et ne ressortent pas beaucoup non plus. D’autres moyens de mettre en évidence du texte en ligne demandent plus de frappes. De plus, ils ne sont pas clairement documentés et nécessitent donc des connaissances internes.
Pour autant que je sache, voici les meilleurs :
Bouton<kbd>Bouton</kbd>
Soulignement vert <ins>Soulignement vert</ins> Barré rouge<del>Barré rouge</del>
Mise en surbrillance <mark>Mise en surbrillance</mark> Barré<strike>Barré</strike>
J’ai trouvé le plugin qui fait cela par hasard aujourd’hui en parcourant la catégorie Plugin… drôle comment dans certains cas, on ne trouve tout simplement pas le bon mot-clé pour trouver un plugin.
Indépendamment de la solution, je pense qu’il y a un problème d’UX clair avec la conception actuelle du bloc de code. Le contraste est quasi inexistant.
Pour citer @codinghorror, je dirais au contraire que « la plupart des endroits sur le web » n’affichent pas ce problème.
Je soutiendrais que le soulignement vert et la mise en surbrillance ont exactement le problème inverse avec un contraste inutilement très élevé, mais c’est plus une question de goût qu’un problème d’UX.
Que diriez-vous d’implémenter l’approche github avec un fond gris plus foncé et un peu de padding ?
Là où cela se complique, c’est pour préconiser un changement énorme sur chaque instance de Discourse, dont beaucoup sont habituées au style doux actuel. C’est un mouvement de fromage majeur.
La solution de simplement ajouter du CSS existe déjà pour la plupart des installations.
