Langage « Console »

Avec texte blanc sur fond noir

a marqué ce sujet comme résolu.
Auteur du sujet

Salut à tous,

Certains se souviennent peut-être de l’époque de feu le Site du Zéro, où l’on avait un langage de programmation qui en fait illustrait la console, avec du texte blanc sur fond noir. C’était utile dans un cours de programmation, par exemple, pour mettre les résultats du code.

Le fond noir de la console, tiré de Internet Wayback Machine.
Le fond noir de la console, tiré de Internet Wayback Machine.

Après, j’avoue ne pas avoir idée de la difficulté. A t-on la main là-dessus ?

informaticienzero

Cette réponse a aidé l’auteur du sujet

Alors sur ZdS.

Basiquement, ce serait pas plus compliqué que rajouter ce css :

.language-shell {
  background-color: #333;
  color: azure;
}

Mais ! Le rendu garde la numérotation. Le résultat est : Code shell avec fond noir

Avec une autre méthode on peut obtenir ceci :

Code shell avec les couleurs inversées
Code shell avec les couleurs inversées

Mais du coup le css devient :

div .hljs-code-div {
    filter: invert(100%);
}

// Ou
.inverted {
    filter: invert(100%);
}

En gros, avec quelques modifications on pourrait arriver à un résultat pas mal.

Édité par ache

ache.one                 🦹         👾                                🦊

+4 -0

J’ai une petite préférence pour la version avec les numéros en dehors du cadre noir. J’ai l’impression que ça peut éviter certaines confusions.

Mais sinon je dis chapeau !

+0 -0

Personnellement, je préfère avec les numéros de ligne car c’est plus pratique pour expliquer un résultat pas à pas

Et entre les 2 versions, je préfère également la deuxième (j’ai d’ailleurs "aimé" le commentaire de Aabu)

+0 -0

@Angelo Si je ne me trompe pas, Aabu est pour la première version 😕

ache.one                 🦹         👾                                🦊

+0 -0

Après, j’avoue ne pas avoir idée de la difficulté. A t-on la main là-dessus ?

Il n’y a aucune difficulté, ce n’est qu’une question de CSS côté zds, rien à faire côté markdown.

Le markdown :

```console
$ uptime
```

donne :

$ uptime

Il faut ajouter du CSS pour rendre ça correctement, c’est tout. :)

Par rendre correctement, j’entends : texte blanc sur fond noir, sans coloration (prendre toutes les classes de coloration syntaxique à l’intérieur de .hljs.language-console et les mettre en blanc).

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+2 -0

Ou alors dans la conf de zmd et plus précisément de rehype-highlight (je donné le nom de mémoire alors désolé s’il n’est pas exact) lui dire que "console" est un langage ignoré.

+0 -0

Mais pourquoi faire ça ? cepus et artragis ? :/

Moi dans ma console j’ai les chaines de caractères qui sont de couleurs différentes de la commande afin de bien les différencier.

# echo "qsdf" 'qsdf' 11 || cat > echo
$ echo $( echo qsdf )

Bon j’avoue c’est pas ouf ouf. Il colore les build-in en une autre couleur mais n’est pas capable de détecter les chaînages ni les sous-commandes. Et d’ailleurs il colore les build-in même si ce sont des paramètres. >_<"

Le seul truc à garder à ce niveau là du coup, c’est la coloration du '$' ou "#" au début. >_<"

ache.one                 🦹         👾                                🦊

+0 -0

@ache, relis bien le topic, en particulier :

illustrait la console, avec du texte blanc sur fond noir. C’était utile dans un cours de programmation, par exemple, pour mettre les résultats du code.

Le fond noir de la console, tiré de Internet Wayback Machine.
Le fond noir de la console, tiré de Internet Wayback Machine.

informaticienzero

informaticienzero

Si j’ai bien compris ta question porte sur "comment afficher un texte blanc sur fond noir" c’est ça ?

Eskimon

En gros oui. Avoir un bloc spécial ou un nouveau langage pour obtenir le même rendu que sur la capture d’écran du SdZ.

informaticienzero

Si tu souhaites la coloration syntaxique pour bash :

echo "foo $1"

Note également que c’est pas parce que ton shell custom affiche les trucs d’une façon spéciale que tous les shell affichent exactement comme chez toi. Un invite de commande windows de base, par exemple, y’a pas masse de coloration de ce que tu y tapes. Un /bin/sh de base non plus.

Édité par cepus

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0

Ah … Humm. Merci j’avais pas tilté ça comme ça. ^^

ache.one                 🦹         👾                                🦊

+0 -0

@informaticienzero tu essaye de faire un parser de bbcode par exemple :

[console] Segmentation fault [/console] et que ceci s’affiche avec un background-color: black et color: white;

ceci ce fera en php avec un les expression régulière.

Un exemple avec title qui met un h2

$text = preg_replace('#\[title\](.+)\[/title]#isU', '<h2 class="bbcodeH2">$1</h2>', $text);

puis dans ton fichier css tu a la class bbcodeH2 qui est utilise tu lui applique les style qui va bien.

Je sait pas si sa ta pus t’aider…

Sinon je suis presse pour votre cours C++ surtout sur les notion que je ne maîtrise pas ;)

Édité par Wankyx

+0 -2

ceci ce fera en php avec un les expression régulière.

Wankyx

Alors non, il y a déjà un moteur Markdown (zMarkdown) qui gère toute la syntaxe de formatage des messages, avec plus de possibilités que ce que permettent les langages rationnels.

entwanne

bbcode c’est trop vieux ? j’ai pas compris :D

Édité par Wankyx

+0 -0

bbcode c’est trop vieux ? j’ai pas compris :D

Wankyx

C’est pas une question d’âge, mais ici on format les messages en markdown et pas en bbcode, ce premier a d’ailleurs une syntaxe plus agréable (où les éléments se distinguent à l’œil).

Ce que je voulais dire c’est que les remplacements à base d’expressions rationnelles (tes exemples avec preg_replace en PHP) sont sales et peu extensibles.

Et comme rappelé par @informaticienzero, ce n’est pas vraiment le sujet.

Équipe technique

Salut @Wankyx

en fait le problème qu’expose informaticienzero est un problème propre au site zestedesavoir et non pas d’un projet personnel.

Afin d’avoir un tutoriel qui s’affiche avec un style efficace, il demande à l’équipe technique du site si ça ne serait pas possible de créer un "cas particulier" pour le langage "console".

Je vais étudier le sujet dans les jours à venir car je pense que la résolution de ce problème est liée à une autre demande : pouvoir proprement colorer le langage "latex".

Édité par artragis

+0 -0

Créer un cas particulier à l’air d’être assez complexe au niveau du colorateur syntaxique.

Mais quel est le problème avec LATXE\LaTeX ?

ache.one                 🦹         👾                                🦊

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte