Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

Astuce sur le forum n°1 - Bloc de texte de type code

LePointdArret

Chers membres du Point d'Arrêt,

Nous avons le plaisir de partager cette première #astuce portant sur l'utilisation du forum.

Comment insérer un bloc de texte «ressemblant à du code» dans vos messages ? Voici une capture montrant les deux façons possibles, et la petite nuance entre les deux…

A votre disposition pour toute question.

Bien à vous,

L'équipe du Point d'Arrêt

FredoMkb

Une autre méthode, pour pouvoir insérer du code sur plusieurs lignes, consiste à utiliser la balise BBCode dédiée.

Elle se compose d'une balise ouvrante, puis le corps du code, enfin une balise fermante.

La syntaxe de la balise ouvrante est la suivante : [ code ] (sans les espaces entre les croches et le mot "code")
La syntaxe de la balise fermante ajoute un slash, ainsi : [ /code ] (toujours sans les espaces)

On peut ajouter, dans la balise ouvrante, un attribut pour indiquer le langage (ce qui change la coloration syntaxique du code), séparé par le signe "=" : [ code=html ] (sans les espaces)

Voici quelques abréviations autorisées pour les langages (il y en a d'autres) :

html = HyperText Markup Language ;
css = Cascading Style Sheets ;
js = JavaScript ;
php = Hypertext Preprocessor ;
fmp = FileMaker Pro (code blanc sans coloration).

Voici un exemple en Html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
  </head>
  <body>
  </body>
</html>

Voici un exemple en Css :

html, body {
 margin: 0;
 padding: 0;
 }
body {
 background-color: white; 
 font-family: Verdana, sans-serif; 
 font-size: 100%;
 }

Enfin, un exemple en JavaScript :

function checkGuess() {
  alert('Je suis un espace réservé');
}
checkGuess();

😉

PS. C'est drôle, je viens de voir que la colorisation syntaxique fonctionne très bien sur le code lorsqu'on est en mode rédaction du message, mais elle disparait une fois que celui-ci est publié… bizarre ce truc… non ? 😕

MagalieJ

Je vois bien la coloration, même une fois publié !

FredoMkb

MagalieJ et Stephen
Ah oui, c'est vrai, maintenant je la vois bien la coloration syntaxique… étrange ce truc 😕

Au fait, c'est dommage qu'on ne puisse pas éditer un ancien message… ou il y a quelque chose à faire pour ça ?

Stephen

moi aussi

bobino

La fonction de BBCode est effectivement active et je dois reconnaître ne pas être pleinement familier avec celle-ci (je suis plus familier avec Markdown qui est aussi actif). Merci pour le partage. Du même souffle, je m'interroge quant à savoir si elle doit rester active puisqu'elle semble parfois entrer en conflit avec des séquences de texte qu'on souhaite saisir normalement. Par exemple il m'arrive que l'accent circonflexe soit interprété de sorte qu'il se dissocie du caractère auquel je souhaite l'appliquer et interprête mon texte comme devant s'écrire en exposant "superscript" comme ceci ^abc123

Un autre cas problématique semblait d'inclure du texte entre deux signes de dollar comme lorsque l'on énumère deux variables l'une après l'autre $variableA puis $variableB ( qui transforme le texte en code "inline" ), mais il semble que si l'utilisateur, au moment où l'éditeur de texte applique la modification appuis sur la touche de suppression (backspace), l'éditeur de texte comprend que ce formatage n'est pas désiré et laisse l'utilisateur poursuivre sans appliquer de modification au texte ainsi inséré.

FredoMkb

bobino

De ce que je sais, historiquement, le système de balisage BBCode est apparu pour permettre le formatages des textes pour les sites développés en PHP à l'origine, notamment dans les forums d'échanges (comme celui-ci) et autres blogs…

Quant au système MarkDown, il est plus tardifs il me semble, l'idée était de proposer un système de balisage du texte qui pouvait rester lisible même en état brut (sans formatage). Il s'est essentiellement déployé au début pour une utilisation rédactionnelle, pour des fichiers "Read-me" et autres aides en ligne, ainsi que pour certains historiques de traitements (logs) par exemple…

Bref, les deux systèmes ont leurs avantages et inconvénients, perso, pour ici, j'aurais une petite préférence pour le BBCode (j'ai fait mes premières armes sur les forums avec lui… nostalgie quand tu nous tiens 😉 ) et puis, je crois qu'il propose plus d'options et qui pose moins de soucis…

Enfin bon, laisser les deux systèmes actifs ne me paraît pas être une mauvaise idée… au contraire !

😉

JeremieGimenez

Merci @FredoMkb pour ton ajout, c'est très intéressant ! La plupart du temps, sur ce forum du moins, quand on utilisera les bloc de texte de type code, ça sera pour entrer des formules de calcul façon FM ou des déroulés de script façon FM, ce qui ne permettra pas une jolie coloration, mais en cas d'insertion de html, js ou autre, on pourra se faire plaisir !

FredoMkb

JeremieGimenez

Apparemment, dans ce moteur de forum, la librairie utilisée pour la coloration syntaxique se nomme "highlightjs" (voir : https://discuss.flarum.org/d/23229-highlightjs).

Sinon, selon mes tests, pour avoir une coloration syntaxique à-peu-près correcte pour les scripts FileMaker, on peut utiliser le langage PHP, balise BBCode : [ code=php ]

Attention toutefois, pour les commentaires sur plusieurs lignes, il faut remplacer le caractère "#" par les balises " / * " et " * / " (sans les espaces) en début et fin de commentaire respectivement.

De même, pour les versions française des codes (ou autres langues j'imagine), il faut prendre soin de supprimer toutes les apostrophes "'" dans les lignes de code (ça passe dans les commentaires).

Voici un exemple de script (texte récupéré via les plugin MBS, voir : https://www.monkeybreadsoftware.com/filemaker/).

Voir comment, par exemple, l'action de script "Actualiser l'objet" est modifiée en "Actualiser objet" pour éviter justement des erreurs dans la coloration syntaxique dues à la présence de l'apostrophe.

# Paramètre : fournir le nom de l'objet sur le modèle actif
/* 
Liste ( 
	"object_to_go_1|object_to_go_2" ; // goto object
	"object_to_refresh_1|object_to_refresh_2" // refresh object
) 
*/
Définir variable [ $params ; Valeur: Obtenir ( ParamètreScript ) ] 
Définir variable [ $goto_list ; Valeur: Substituer ( SupprimerEspace ( ObtenirValeur ( $params ; 1 ) ) ; "|" ; "¶" ) ] 
Définir variable [ $actu_list ; Valeur: Substituer ( SupprimerEspace ( ObtenirValeur ( $params ; 2 ) ) ; "|" ; "¶" ) ] 
Définir variable [ $goto_nbr ; Valeur: DecompteValeurs ( $goto_list ) ] 
Définir variable [ $actu_nbr ; Valeur: DecompteValeurs ( $actu_list ) ] 
# 
Définir variable [ $actu_nro ; Valeur: 0 ] 
Boucle
	Définir variable [ $actu_nro ; Valeur: $actu_nro + 1 ] 
	Fin de boucle si [ $actu_nro > $actu_nbr ] 
	Actualiser objet [ Nom objet : ObtenirValeur ( $actu_list ; $actu_nro ) ] 
Fin de boucle
# 
Définir variable [ $goto_nro ; Valeur: 0 ] 
Boucle
	Définir variable [ $goto_nro ; Valeur: $goto_nro + 1 ] 
	Fin de boucle si [ $goto_nro > $goto_nbr ] 
	Aller à objet [ Nom objet : ObtenirValeur ( $goto_list ; $goto_nro ) ] 
Fin de boucle
# 
Fin de script [ Résultat de texte: 1 ]

En revanche, pour les codes des fonctions et autres formules de calcul, on peut utiliser le JS (JavaScript) en plus du PHP (avec une coloration un peu différente pour chacun), balise BBCode : [ code=js ]

/*
Fonction qui retourne la date actuelle formatée : AAMMJJsSepHHMMSS (YYMMDDsSepHHMMSS)
*/
Definir ( 
[
    _date = Obtenir ( DateActuelle )
;
    _time = Obtenir ( HeureActuelle )
;
    _annee = Fin ( "00" & Annee ( _date ) ; 2 )
;
    _mois = Fin ( "00" & Mois ( _date ) ; 2 )
;
    _jour = Fin ( "00" & Jour ( _date ) ; 2 )
;
    _heure = Fin ( "00" & Heures ( _time ) ; 2 )
;
    _mins = Fin ( "00" & Minutes ( _time ) ; 2 )
;
    _secs = Fin ( "00" & Secondes ( _time ) ; 2 )
] ;
    _annee & _mois & _jour & sSep & _heure & _mins & _secs
)

Ce n'est évidemment pas l'idéal, mais ça peut déjà aider à la lecture des codes FileMaker…

Enfin, on peut voir si on ne pourrait pas développer, avec l'aide de toute la communauté, les définitions des langages Fmp pour cette librairie (voir : https://highlightjs.readthedocs.io/en/latest/language-guide.html)

😉

JeremieGimenez

FredoMkb Ce n'est évidemment pas l'idéal

C'est tout de même déjà très très bien ! 🤠