IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Forum du club : Sept améliorations apportées à la balise CODE
Pour plus de confort

Le , par Anomaly

20PARTAGES

66  0 
Deux nouvelles colorations syntaxique et quelques améliorations apportées à la balise CODE
pour plus de confort sur les forums de Developpez.com


Chers amis,

J'ai le plaisir de vous informer que la balise Code a été encore une fois améliorée !

Ajout de deux nouvelles colorations :
- Bash (en vigueur sur les forums Linux par défaut)
- Assembleur (en vigueur sur les forums Assembleur par défaut)

Code bash : Sélectionner tout
1
2
3
4
5
#!/bin/bash 
for i in *.txt 
do 
    echo "Le répertoire contient " $i 
done
Code asm : Sélectionner tout
1
2
3
4
message db "Vive Developpez$" 
mov ah, 09h 
mov dx, offset message 
int 21h

Autres améliorations :
- Résolution du souci de compatibilité entre Chrome et le lien "Sélectionner tout"
- Résolution de la déformation de la balise CodeInline en cas de code partiel ou incorrect
- Suppression de la bordure autour du CodeInline pour éviter la superposition disgrâcieuse de plusieurs CodeInline proches.

Excellente navigation sur nos forums à tous.

Nouveautés précédentes

Bonjour à tous,

J'ai le plaisir de vous annoncer que pas moins de huit améliorations ont été apportées à la balise CODE !

Première amélioration : La numérotation des lignes

Pour tout code d'au moins deux lignes, les lignes sont désormais numérotées ! Et rassurez-vous, copier-coller le code n'emportera pas les numéros de lignes par la même occasion.

Exemple :
Code c : Sélectionner tout
1
2
3
4
5
6
7
#include <stdio.h> 
#include <stdlib.h> 
  
int main() { 
    puts("Bonjour, monde !"); 
    return EXIT_SUCCESS; 
}

Deuxième amélioration : Possibilité de visualiser le code seul sur une fenêtre à part

Désormais, chaque code est accompagné d'un lien "Visualiser le code dans une fenêtre à part" qui permet, en un clic, d'ouvrir un nouvel onglet contenant le code seul avec ses numéros de ligne pour une consultation plus facile !

Troisième amélioration : Le code Inline

Fonctionnalité souvent demandée, il vous est maintenant possible de donner un simple mini-bloc de code d'une ligne au milieu d'une phrase sans que ceci impose un retour à la ligne avant et après le bloc. Il faut maintenant utiliser la nouvelle balise CODEINLINE (qui, à l'instar de la balise CODE, peut prendre un paramètre) pour profiter de cette nouvelle fonctionalité.

Exemple, voici un exemple de code C inline : const char* pseudo = "Anomaly"; /* Responsable technique */ que j'ai inséré au milieu d'une phrase.

Une nouvelle balise a été introduite pour résoudre les problèmes de formatage des anciens messages avec le précédent comportement de mode inline automatique avec la balise CODE. Mettre plusieurs lignes de code dans une balise CODEINLINE génère du code classique.

Quatrième amélioration : Coloration Ruby

Le langage Ruby est maintenant supporté par la coloration syntaxique ! Automatiquement sur le forum Ruby et manuellement en faisant [code=ruby]

Exemple (extrait de Wikipédia) :
Code ruby : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Bibliotheque 
  
   # Accès direct au tableau de livres 
   attr_reader :livres 
  
   # Méthode appelée à la création d'un objet bibliothèque qui initialise le tableau de livres 
   def initialize 
     @livres = [] 
   end 
  
   # Ajoute un livre à la bibliothèque, s'il n'y est pas déjà 
   def ajouter livre 
     raise "Le livre #{livre} est déjà dans la bibliothèque" if @livres.include? livre 
     @livres << livre 
   end 
  
   # Retourne le nombre de livres dans la bibliothèque 
   def taille 
     @livres.length 
   end 
  
   # Retourne la liste des auteurs ayant écrit ou co-écrit au moins un livre dans la bibliothèque 
   def auteurs 
     @livres.map { |livre| livre.auteurs }.flatten.uniq 
   end 
 end

Cinquième amélioration : Bloc de code aussi large que la fenêtre

Désormais, les blocs de code sont aussi larges que la fenêtre le permet. Profitez enfin des capacités de votre écran Wide pour visualiser le code confortablement.

Sixième amélioration : Suppression de la ligne vide en-dessous des codes courts

Une amélioration esthétique : le bloc d'un code court est désormais de la bonne hauteur au lieu de faire une ligne de trop, ce qui prenait de la place en hauteur pour rien, et on sait que la place en hauteur est précieuse à l'époque des écrans 16/9.

Septième amélioration : Possibilité de sélectionner le code d'un seul clic (prêt à être copié dans le presse-papiers)

Chaque code est maintenant accompagné d'un lien "Sélectionner tout" qui... sélectionne tout le code, sans les numéros de lignes, prêt ainsi à être copié dans le presse-papiers.

Note : il n'y a pas de méthode portable pour automatiser la copie vers le presse-papiers du code, à moins de passer par une applet en Flash, ce que vous conviendrez serait lourd et sale.

Huitième amélioration : Nouvelle balise PRE pour générer un bloc en taille fixe sans numéros de ligne

Nouveau ! Nous avons pensé à ceux qui utilisaient la balise CODE pour autre chose que du code, notamment profiter des facilités de présentation que permet une police en taille fixe, et qui étaient gênés par les nouvelles fonctionnalités. Nous avons alors introduit la nouvelle balise PRE qui génère un simple bloc de police en taille fixe sans fonctionnalités superflues.

Important : si le lien pour sélectionner tout et/ou pour voir le code sur une nouvelle fenêtre ne semblent pas fonctionner ou si les blocs de code ne sont pas élargis, faites F5 une fois sur la discussion pour mettre à jour le code Javascript qui est en cache afin d'activer ces fonctionnalités.

Excellente navigation sur les forums de Developpez.com !

Mises à jour :

01/07/2011:
- Deux nouvelles colorations syntaxiques : Assembleur et Bash
- Lien "Sélectionner tout" fonctionnel sous Chrome
- Correction du défaut de rendu du CodeInline avec le code incomplet ou incorrect
- Amélioration de la présentation du CodeInline pour mieux gérer la superposition possible de CodeInlines.

16/05/2011:
- Le langage choisi est à nouveau affiché au début du bloc de code comme c'était à l'origine.
- La coloration C# a été mise à jour pour supporter les nombreuses évolutions du langage depuis la mise en place de la coloration syntaxique.
- XAML est désormais un synonyme de XML au niveau de la coloration.

26/04/2011:
- Nouvelle balise PRE pour générer un bloc en police fixe sans numéros de lignes ni liens spéciaux.
- Nouvelle balise CODEINLINE (avec ou sans paramètre de coloration) pour générer du code inline.
- Plus de retour à la ligne à la fin d'un code inline.
- Mettre plusieurs lignes dans un CODEINLINE est équivalent à utiliser la balise CODE normale.
- La balise CODE standard ne génère plus de code inline par défaut.

20/04/2011:
- Cliquer sur le lien "Visualiser dans une fenêtre à part" affiche une erreur plutôt qu'un code incomplet si le code est trop long.
- Les balises CODE situées à l'intérieur de balises QUOTE sont désormais correctement dimensionnées et donc ne déforment plus le forum.

08/04/2011:
- Nouveau lien "Sélectionner tout" : pour sélectionner le code en un seul clic sans risquer de sélectionner les numéros de ligne avec.
- Le problème de la barre de défilement horizontale qui mangeait la dernière ligne d'un code devrait être résolu dans la majorité des cas.
- Le code inline est désormais toujours suivi d'un retour à la ligne pour résoudre les soucis de présentation avec les anciens messages.

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 01/07/2011 à 15:46
Chers amis,

J'ai le plaisir de vous informer que la balise Code a été encore une fois améliorée !

Ajout de deux nouvelles colorations :
- Bash (en vigueur sur les forums Linux par défaut)
- Assembleur (en vigueur sur les forums Assembleur par défaut)

Code bash : Sélectionner tout
1
2
3
4
5
#!/bin/bash 
for i in *.txt 
do 
    echo "Le répertoire contient " $i 
done
Code asm : Sélectionner tout
1
2
3
4
message db "Vive Developpez$" 
mov ah, 09h 
mov dx, offset message 
int 21h

Autres améliorations :
- Résolution du souci de compatibilité entre Chrome et le lien "Sélectionner tout"
- Résolution de la déformation de la balise CodeInline en cas de code partiel ou incorrect
- Suppression de la bordure autour du CodeInline pour éviter la superposition disgrâcieuse de plusieurs CodeInline proches.

Je tiens à préciser que pour les heureux utilisateurs d'Internet Explorer, le module Code n'est certifié fonctionner correctement qu'à partir de la version 7. Les utilisateurs d'une version tirée de la préhistoire sont invités à envisager une migration vers un navigateur moderne.

Excellente navigation sur nos forums à tous.
18  0 
Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 20/04/2011 à 16:28
Bonjour à tous,

J'ai le plaisir de vous annoncer que deux améliorations ont été apportées à la balise CODE.

1) Cliquer sur le lien "Visualiser dans une fenêtre à part" affiche une erreur plutôt qu'un code incomplet si le code est trop long.

2) Les balises CODE situées à l'intérieur de balises QUOTE sont désormais correctement dimensionnées et donc ne déforment plus le forum.

Je travaille sur le reste des améliorations que je compte bien vous présenter très prochainement.

Pour que les changements soient pris en compte, vous aurez besoin de faire F5 une fois sur une discussion.
17  1 
Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 26/04/2011 à 15:49
Et encore une nouvelle version

Au programme :

- Nouvelle balise PRE pour générer un bloc en police fixe sans numéros de lignes. Utile pour ceux qui utilisaient la balise CODE pour de la présentation plutôt que du code.

- Nouvelle balise CODEINLINE (acceptant un paramètre facultatif de coloration) pour générer du code inline. L'ancien fonctionnement du code inline posait trop de problèmes avec le code existant.

- Du coup, plus de retour à la ligne forcé à la suite de CODEINLINE puisque c'est une nouvelle balise.

- Mettre plusieurs lignes de code dans un CODEINLINE génère un bloc de code standard.

Excellente navigation sur Developpez.com.
13  0 
Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 16/05/2011 à 11:03
Petites améliorations apportées ce matin à la balise Code :
- Le langage choisi est à nouveau affiché au début du bloc de code comme c'était à l'origine.
- La coloration C# a été mise à jour pour supporter les nombreuses évolutions du langage depuis la mise en place de la coloration syntaxique.
- XAML est désormais un synonyme de XML au niveau de la coloration

Pour le reste, ne vous inquiétez pas, j'y travaille.
12  0 
Avatar de Bisûnûrs
Modérateur https://www.developpez.com
Le 28/09/2011 à 16:20
Et voici l'extension Firefox :
http://j-willette.developpez.com/dev...codeinline.xpi

J'ai mis la validité de l'extension jusqu'à la version 8 incluse, je devrais être tranquille pendant 12 petites semaines. Au pire, vous pouvez toujours modifier le XPI vous-même pour augmenter la validité de l'extension sur les futures versions de Firefox.
9  0 
Avatar de tomlev
Rédacteur/Modérateur https://www.developpez.com
Le 28/09/2011 à 10:27
Citation Envoyé par Médinoc  Voir le message
Bonjour,
Serait-il possible d'avoir un bouton pour la balise CODEINLINE ? Elle est plus longue à taper que la plupart des autres balises...

Perso je me suis fait un "marque-page script" pour ça. Voilà le code :

Code Javascript : Sélectionner tout
javascript:(function(){%20var%20textarea%20=%20document.activeElement;%20var%20scrollTop%20=%20textarea.scrollTop;%20var%20len%20=%20textarea.value.length;%20var%20start%20=%20textarea.selectionStart;%20var%20end%20=%20textarea.selectionEnd;%20var%20sel%20=%20textarea.value.substring(start,%20end);%20var%20prefix%20=%20%22[CODEINLINE]%22;%20var%20suffix%20=%20%22[/CODEINLINE]%22;%20var%20replace%20=%20prefix%20+%20sel%20+%20suffix;%20textarea.value%20=%20textarea.value.substring(0,%20start)%20+%20replace%20+%20textarea.value.substring(end,%20len);%20textarea.setSelectionRange(start%20+%20prefix.length,%20start%20+%20prefix.length%20+%20sel.length);%20textarea.scrollTop%20=%20scrollTop;%20textarea.focus();})();

Tu mets ça dans un marque-page que tu appelles [CODEINLINE], et tu as ton bouton... Ca fonctionne sous Firefox, pour les autres navigateurs je sais pas.

(ouais, c'est moche... en clair ça donne ça : )

Code Javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
		        (function() { 
		            var textarea = document.activeElement; 
		            var scrollTop = textarea.scrollTop; 
		            var len = textarea.value.length; 
		            var start = textarea.selectionStart; 
		            var end = textarea.selectionEnd; 
		            var sel = textarea.value.substring(start, end); 
		            var prefix = "[CODEINLINE]";  
		            var suffix = "[/CODEINLINE]"; 
		            var replace = prefix + sel + suffix; 
		            textarea.value = textarea.value.substring(0, start) + replace + textarea.value.substring(end, len); 
		            textarea.setSelectionRange(start + prefix.length, start + prefix.length + sel.length); 
		            textarea.scrollTop = scrollTop; 
		            textarea.focus(); 
		        })();
8  0 
Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 30/04/2011 à 10:19
Est-ce que vous pourriez vraiment s'il vous plaît cesser ce monstrueux hors sujet ? Je vais me désabonner de la discussion vu que plus personne ne parle de la balise code et que maintenant il n'y a que des messages sans intérêt, je suppose donc qu'il n'y a plus rien à faire.

PS: En passant je suis l'auteur du vote négatif, non pas que je suis pas d'accord avec la construction grammaticale, mais pas d'accord que vous veniez polluer la discussion avec votre troll grammatical sans intérêt.

Edit: Messages HS supprimés
7  0 
Avatar de RomainVALERI
Expert confirmé https://www.developpez.com
Le 05/04/2011 à 11:25
Code java : Sélectionner tout
1
2
Felicitation felicitation = new GratitudeFactory.Felicitation("clap clap"); 
Developpez.equipe.adresser(felicitation);
pas pu m'en empecher
6  0 
Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 08/04/2011 à 19:26
Mise à jour

Trois améliorations ont été faites au système suite à vos remarques :

- Nouveau lien "Sélectionner tout" : pour sélectionner le code en un seul clic sans risquer de sélectionner les numéros de ligne avec ! Si ce lien ne fonctionne pas, faites F5 une fois pour mettre à jour le code Javascript.

- Le problème de la barre de défilement horizontale qui mangeait la dernière ligne d'un code devrait être résolu dans la majorité des cas.

- Pour éviter les soucis de présentation provoqués par les codes inline non suivis immédiatement d'un texte normal, désormais, un retour à la ligne est forcé après un code inline. J'aurais préféré une solution plus efficace, mais après m'être arraché les cheveux par touffes et constaté la totale disparition desdits cheveux, j'ai cédé à cette solution partielle.
6  0 
Avatar de Anomaly
Responsable technique https://www.developpez.com
Le 19/08/2011 à 19:53
Bonsoir à tous,

J'ai le plaisir de vous informer que le problème de la notification e-mail d'un message contenant du code (qui provoquait l'affichage en clair de code HTML illisible) a été enfin résolu !

Par la même occasion, deux autres petites améliorations ont été apportées :
- La présentation de la version imprimable de la discussion a été améliorée
- La coloration HTML a été améliorée : plus de couleurs mélangées et support des balises HTML 5
6  0