Mettre des exemples de code dans un article Le retour

Appréciation moyenne:  / 3
Très mauvaisTrès bien 

Insérer proprement du code javascript, php, ou autre dans des articles avec Joomla, la suite...

Dans une première partie, nous avons vu comment utiliser un plugin Codecitation pour formater du code dans des articles joomla.

Quelques bugs mineurs et le soucis de comprendre m'ont poussé à aller plus loin afin d'avoir un plugin fonctionnant le mieux possible.

Mes recherches ont donné naissance à un nouveau plugin: FCKFormatCode

 

 


Installation de FCKFormatCode, un plugin de formatage et coloration de code pour JoomlaFCK

Pour installer ce plugin, il suffit d'aller consulter le document FCKFormatCode installation du plugin de formatage de code

Utilisation de FCKFormatCode pour joomlaFCK

Comme tout le monde l'a compris, le plugin FCKFormatCode pour JoomlaFCK sert à insérer du code php, javascript et bien d'autres dans des articles Joomla.

Il va encadrer ce code dans une balise PRE et, suivant les options choisies, colorer les instructions, les commentaires,  numéroter les lignes ou non, et divers autres choses que nous allons détailler dans ce document.

On peut même utiliser FCKFormatCode pour mettre en valeur du simple texte, comme nous le verrons plus loin.


L'insertion de code

quatre méthodes sont possibles:

  • écrire son code directement dans l'éditeur JoomlaFCK
  • le copier/coller à partir de votre outil de développement favori, directement dans l'éditeur JoomlaFCK
  • ouvrir le plugin et travailler dans la fenêtre de code directement
  • ouvrir le plugin et copier/coller le code à partir de votre outil de développement favori

Si on travaille directement dans l'éditeur JoomlaFCK, on écrit le code comme on écrit le reste des articles, on positionne l'indentation avec des espaces.

Si on choisit de copier/coller le code parce qu'on l'a déjà écrit dans un éditeur spécifique, il faut juste être attentif à l'indentation qui parfois disparait.
En général, si l'indentation est correcte dans le code source, il n'y a pas de problème dans l'éditeur.

Il faudra ensuite, pour que le plugin puisse positionner la balise PRE et ses options, sélectionner le code puis ouvrir le plugin via son bouton. 

Malgré tout, si le code à insérer est conséquent, je conseille de passer par le plugin lorsqu'on veut coller du code, car celui-ci conserve à coup sûr l'indentation.


Ouverture du plugin

Le plugin est accessible par un bouton dans la barre d'outils si l'installation a été correctement réalisée.

Le bouton est celui-ci:

Un click dessus ouvre la fenêtre de gestion du plugin:

Ici, on n'a pas sélectionné de code depuis l'éditeur, la zône de code "Entrez le code source" est donc vierge.

On se retrouve avec des options par défaut que l'on a pu paramétrer dans un fichier spécial comme expliqué dans l'article FCKFormatCode installation du plugin de formatage de code.

Détaillons un peu les différentes parties de cette fenêtre

En haut, nous avons une zône en lecture seule qui montre les paramètres qui seront insérés dans la balise PRE.
Pour les plus curieux, ces paramètres entrerons dans le tag "class" de cette balise.

Ensuite, nous avons à gauche un bouton qui nous permet de choisir quel langage nous souhaitons utiliser.

Dessous, la fenêtre d 'édition du code.

A droite de la fenêtre, nous pouvons sélectionner les paramètres. Chacun de ces paramètres est suffisamment clair je pense pour que je n'aie pas à l'expliquer.

Lorsqu'on choisit une option, la zône de résumé de la commande se met à jour.

Si on choisit une option par défaut, sa commande spécifique ne s'affiche pas et la commande PRE ne la contiendra pas.
En effet, inutile de charger l'article avec une commande qui de toute façon se fera par défaut.
Par exemple, je choisis de commencer la numérotation de lignes à 1, donc j'écris 1 dans le champs prévu, et il ne se passe rien, car 1 est la valeur par défaut.


Passons maintenant à quelques exemples concrêts

Formatage de texte simple:



On peut utiliser ce plugin pour mettre en valeur une ligne de texte dans un article, comme celle-ci.

Pour ce faire, j'écris ma ligne normalement dans l'éditeur, puis je la sélectionne et je clique sur le bouton FCKFormatCode, pour obtenir la fenêtre comme ceci:

J'aurais pu aussi choisir d'écrire ma ligne de texte directement dans le plugin...

Par défaut, j'avais choisi du javascript plus divers options que l'on voit sur cette image.

Pour mettre en évidence la ligne, je choisis le langage texte, et de masquer la numérotation des lignes, puis de surligner la ligne 1 (n'oublions pas que la numérotation commence par défaut à 1).

J'aurai donc ceci:

Et lorsque je clique sur ok, ma balise PRE est positionnée avec les bons paramètres.

Malheureusement, le plugin de formatage ne fonctionne pas en édition, donc on ne voit pas grand-chose.
Il suffit d'aller vérifier sur le front-end pour voir ce que cela donne...


Modification du code

 Pour modifier du code inséré dans l'éditeur, ou pour transformer du code entré dans l'éditeur en code formaté, il suffit de le sélectionner, comme on l'a vu plus haut avec le texte, puis d'ouvrir le plugin.

Ensuite, si on a bien paramétré ses options par défaut, on n'a plus qu'à cliquer sur le bouton OK.
 

Vous l'aurez compris, si je fais beaucoup de php, j'aurai intérêt à paramétrer le plugin FCKFormatCode avec ce langage par défaut. 

Et en fonction du moment, on peut même aller modifier ce paramétrage, si on est sur du javascript un moment et plus tard sur du php ou autre...

Bref, c'est à l'utilisation qu'on voit tout le confort apporté par ce plugin.

Et je tiens à préciser ici que ce confort n'est pas uniquement du à mon développement, je me suis contenté d'intégrer et de mettre en forme l'excellent outil fourni ici: SyntaxHighlighter

 


Personnaliser certaines couleurs du plugin

Le fichier css àmodifier et qui est utilisé par défaut est:



/plugins/content/formatcode/styles/shThemeDefault.css

J'ai adapté la couleur du surlignage des lignes et de la barre de numérotation à mon site, et vous devriez faire pareil.

Le code à modifier est celui-ci, à chaque couleur que j'ai mise, j'ai laissé en commentaire la couleur verte d'origine:



/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
	background-color: #FEDA9A !important; /*6CE26C*/
	color: black !important;
}

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
	background-color: #FEDA9A !important; /*6CE26C*/
}

/* Add border to the lines */
.syntaxhighlighter .line .content
{
	border-left: 3px solid #FEDA9A !important; /*6CE26C*/
	color: #000 !important;
}

Pour le reste, à chacun de voir, les paramètres sont bien commentés. 


Conclusion

Parfois, lorsqu'on colle du code dans la fenêtre du plugin, on peut avoir des surprises liées à l'indentation, surtout si dans l'éditeur par défaut elle est faite avec des tabulations.

Mais pas de soucis car en front-end tout s'arrange dans la plupart des cas sans rien toucher au code.

A part ça, je l'utilise régulièrement, j'ai longtemps cherché une solution aussi souple, et je suis maintenant comblé.

Si le plugin pose quelques problèmes, on peut toujours me contacter via le menu "contactez-moi", mais je ne garantis aucune rapidité dans les réponses éventuelles.