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 2

Partager ce message


Lien à poster
Partager sur d’autres sites

Très bonne astuce merci ! Je me permets de déterrer le sujet car suite aux mises à jour de Zwii, j'ai constaté que la coloration syntaxique n'était plus affichée sur mon site; rien de bien méchant, en effet, le fichier "core/layout/main.php" a été remplacé lors d'une mise à jour, tout est rentré dans l'ordre après avoir renouvelé l'étape suivante:

 

Le 29/12/2018 à 15:53, PeterRabbit a dit :

É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>

 

 

Question: si c'est envisageable, ne serait-il pas judicieux d'intégrer Prism directement dans Zwii/codesample afin d'éviter ce petit désagrément lors des mises à jour?

Si ça peut être utile à d'autres.. 🙂

Modifié par Zwiistiti

Partager ce message


Lien à poster
Partager sur d’autres sites

Rebonjour @Zwiistiti

Dans la configuration du site, tu trouveras deux champs permettant d’inclure du code, l’un dans head, l’autre dans body. Il te suffira d’y copier les codes que tu indiques. 

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...