Aller au contenu
Support de Zwii et Yocto
PeterRabbit

Code Sample + Prism

Messages recommandés

Depuis la version 8.26, Zwii intègre le plugin "Code Sample" pour TinyMCE.

Comme son nom l'indique, il permet de publier des extraits de code, mais sans la coloration syntaxique des sites de développement.

Il est pourtant conçu pour travailler avec Prism, le script le plus connu dans ce domaine, mais c'est à l'utilisateur de l'installer.

 

Qu'à cela ne tienne : do It yourself !

 

Prism se compose de deux fichiers : un script ("prism.js") et une feuille de style ("prism.css"). Tous les deux sont très légers et se paramètrent à la demande.

Rendez-vous sur la page de téléchargement et configurez votre version en fonction de vos besoins et de vos goûts.

Voici le thème de base, mais vous avez le choix entre 8 thèmes différents dont vous pouvez visualiser le rendu – et que vous pourrez aisément personnaliser par la suite :

 

code.jpg.b0159e64b18f2bc6fbf8b2f502c09074.jpg

 

Pour ce qui est du script, si "Code Sample" prépare le code pour 10 langages parmi les plus courants, Prism vous en propose 157 !

Les utilisateurs les plus exigeants pourront aussi ajouter un ou plusieurs plugins.

 

Installation

Téléchargez les deux fichiers.

Créez un nouveau dossier dans "core/vendor" et nommez-le "prism".

Placez-y les deux fichiers.

 

Éditez "core/layout/main.php".

Ajoutez cette ligne de code dans l'en-tête de la page après les autres liens vers les css...

	<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/vendor/prism/prism.css">
</head>
<body>

... et celle-ci juste avant la fin de page, pour appeler le script :

<script src="<?php echo helper::baseUrl(false); ?>core/vendor/prism/prism.js"></script>
</body>
</html>

Utilisation

A l'endroit voulu de votre page, insérez une zone de code ("+" > "Extrait de code").

Collez-y votre code et choisissez le langage dans la liste déroulante.

 

... Et c'est là que les choses se gâtent !

Si les lignes de PHP pur ne posent aucun problème, dès qu'il y a des balises html, le résultat est assez aléatoire : TinyMCE peut supprimer les chevrons (<>) ou le "&" du code des caractères spéciaux qu'il rencontre, quand il ne considère pas certaines parties comme du code à exécuter...

En tout cas, vous ne pourrez pas éditer votre page sans perdre tout ou partie de votre code :

 

probleme.jpg.493f495010d723cc9482e73cbf105130.jpg

 

Tip

Le problème est archi-connu, plusieurs prétendues solutions courent le web, mais aucune ne fonctionne vraiment.

Celle que je vais vous présenter relève du bricolage, mais elle vous permettra de publier votre code tel qu'il doit apparaître, et d'éditer votre page au besoin :

 

codeok.jpg.4840e126fa9156b76d8d44374a1c6ff1.jpg

 

Sur votre bureau, créez un simple fichier texte (.txt).

Collez-y le code que vous voulez afficher.

Remplacez (avec CTRL H si les remplacements sont nombreux) :

  • "< "par "&lt;"
  • "> "par "&gt;"
  • "&" des caractères spéciaux par "&amp", ce qui donne par exemple " &ampnbsp," pour un espace insécable.

Sauvegardez votre fichier.

 

Copiez ce code modifié dans une zone de "Code Sample" et enregistrez la page.

 

NB

Dans le cas de codes complexes le résultat peut n'être pas encore satisfaisant. Éditez votre page, profitez-en pour la vérifier une dernière fois, enregistrez-la à nouveau.

Cette fois, le code devrait être parfait, les chevrons être des chevrons, les "&nbsp;" apparaître comme tels :

 

codeok2.jpg.c11e6794e444d4cadffde4402991a927.jpg

 

Mais si vous rééditez la page, il faudra tout recommencer parce que TinyMCE n'interprétera plus le code qu'il a réencodé comme du code html. C'est ce qui m'est arrivé en préparant cet article sur une page de Zwii : toutes les deux éditions, les codes redevenaient des chevrons et les "&nbsp;" des espaces...

D'où l'intérêt du fichier que vous avez sauvegardé.

 

Enjoy. :)

 

 

Modifié par PeterRabbit
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×