§ Posté le 15/12/2012 à 16h 47m 55
Ma propre implémentation de l'habituel langage BBCode utilisé sur pas mal de sites. Le parseur est assez moche, mais normalement, devrait fonctionner correctement. J'ai essayé de faire en sorte d'avoir quelque chose de correct, qui vous permette à la fois de styliser votre texte et de le formater correctement, sémantiquement parlant, tout en gardant la « simplicité » du BBCode habituel.
Les balises
À la manière classique, les balises sont indiquées par des crochets, avec un nom indiquant ce que fait la balise ; certaines peuvent éventuellement recevoir un paramètre spécifique ; une balise n'est prise en compte que si elle est fermée un peu plus loin (avec un slash juste avant son nom). Comme on indique le nom de ce qu'on ferme, il est possible de croiser les balises ; mais évitez, quand même, c'est assez moche.
-
La balise « [b] » sert à indiquer un mot important dans le texte (elle correspond à la balise <strong> en HTML).
-
La balise « [em] » sert à mettre un mot en emphase. Il apparaît visuellement comme étant en italique dans les navigateurs classiques (ça correspond à la balise <em> en HTML).
-
La balise « [cite] » sert à indiquer le titre d'un ouvrage ou la référence d'une citation(1) (ça correspond à la nouvelle définition de la balise <cite> en HTML5).
-
La balise « [i] » sert pour les autres cas où on est censé utiliser l'italique. Par exemple, pour signaler un mot ou une locution étrangère (ça correspond à la nouvelle définition de la balise <i> en HTML5).
-
La balise « [u] », qui sert à faire du texte souligné, ne correspond à aucune fonction sémantique particulière, elle n'est présente que pour la compatibilité, parce que c'est une balise BBCode courante (elle est donc gérée, en HTML, par un span avec un style CSS particulier). En général, donc, vous n'aurez pas spécialement besoin de vous en servir.
-
La balise « [s] » sert à indiquer qu'un passage n'est pas correct (ça correspond à la balise <s> en HTML). Visuellement, le texte sera barré.
-
La balise « [hl] » sert à surligner le texte. Elle est à utiliser quand vous voulez mettre une partie du contenu d'une citation en valeur alors qu'elle ne l'était pas à l'origine, par exemple pour y répondre ou pour appuyer vos propos (ça correspond à la nouvelle balise <mark> en HTML5).
-
La balise « [msp] » sert à signaler qu'un passage est mal orthographié, par exemple (ça correspond à la nouvelle définition de la balise <u> en HTML5).
-
La balise « [url] » sert à insérer un lien. Si vous ne précisez aucun paramètre, le contenu de la balise est utilisé à la fois comme adresse et comme texte à afficher ; si vous préférez, vous pouvez indiquez l'adresse en paramètre, et le contenu de la balise sera le texte affiché.
-
La balise « [img] » sert à afficher une image. Si vous ne précisez aucun paramètre, le contenu de la balise sera utilisé comme adresse, et l'image aura un texte alternatif automatique (« (Illustration) ») ; si vous préférez, vous pouvez indiquer l'adresse en paramètre, et le contenu de la balise sera utilisé comme texte alternatif.
-
La balise « [align] » sert à changer l'alignement du texte ; c'est une balise purement stylistique, sans aucune fonction sémantique (gérée par une balise <div>). Il faut nécessairement préciser un paramètre pour qu'elle soit acceptée ; les paramètres reconnus sont « left », « right » et « center » (en théorie, tout devrait être justifié ; en pratique, ça ne marche que pour l'alignement à gauche, pour le moment).
-
La balise « [quote] » sert à insérer un bloc de citation (balise <blockquote> en HTML). Vous pouvez indiquer un nom d'auteur ou de source en paramètre ; un titre sera affiché dans ce cas.
-
La balise « [code] » sert à insérer un bloc de code (aucune balise ne sera reconnue à l'intérieur, normalement). Vous pouvez indiquer un titre en paramètre (la coloration syntaxique n'est pas encore gérée, par contre).
-
La balise « [+] » sert à créer un bloc pour indiquer un nouvel ajout (édition tardive du message ; comme vous n'avez pas la possibilité d'éditer vos messages sur ce site, elle ne devrait pas vous servir, mais je l'ai mise pour moi, au cas où). Vous pouvez indiquer en paramètre le timestamp correspondant à l'édition (il ne sera pour l'instant pas affiché, mais ça peut servir pour l'analyse automatique).
Les émotes
Il existe deux manières d'utiliser les émotes en BBCode classique : soit indiquer directement un code représentant le smiley (par exemple, « ;-) » dans le texte, soit indiquer un nom entouré de deux-points (par exemple, « :wink: »).
Histoire d'éviter les déclenchements intempestifs, et parce que j'aime bien aussi pouvoir afficher des émotes sous forme textuelle, seul le second cas est implémenté dans mon parseur, donc si vous indiquez un code correspondant à une émote directement, elle ne sera pas convertie ; mais elle le sera si vous mettez « : » avant et après (en plus de celui qu'elle contient éventuellement déjà pour les yeux).
Si vous trouvez ça trop lourd, et que vous voulez pouvoir aussi indiquer des émotes directement, indiquez-le, je verrai comment arranger ça
Si vous avez des suggestions d'amélioration, je vous écoute.