SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 92 visiteurs en ce moment

Accueil > Rédaction > Pre & Code > Pre & Code

Pre & Code

5 avril 2018 – par nicod_, tetue – commentaires

13 votes

Ce plugin rationalise l’affichage du code sous SPIP par l’usage des éléments HTML corrects et facilite le copier-coller de n’importe quel bloc de code.

Un seul raccourci : <code>

Deux raccourcis sont prévus par SPIP pour afficher du code : <code> ou <cadre>.

Le premier raccourci, <code>, sans doute le plus courant, s’utilise aussi bien pour un peu de code inline que pour un bloc de code. En effet, le code HTML qu’il génère s’adapte automatiquement, pour rester dans la ligne ou — dès lors qu’il contient plusieurs lignes de code — former un bloc qui va à la ligne.

Le second raccourci, <cadre>, moins connu, génère un bloc de code formé de balises <textarea> : c’est un usage complètement détourné du HTML mais qui, selon la documentation, était prévu pour permettre d’en copier-coller le contenu plus facilement.

Avec ce plugin qui facilite le copier-coller de n’importe quel bloc de code, le raccourci <cadre> devient inutile. Il reste néanmoins fonctionnel, par souci de rétro-compatibilité, en adoptant le fonctionnement du raccourci <code>.

Copier-coller facilité

Ce plugin facilite le copier-coller des blocs de code : en survolant le bloc de code, un bouton « Copier » s’affiche ; au clic son contenu est copié dans le presse-papier. Simple et efficace.

Cela fonctionne avec la petite librairie javascript clipboard.js.

Code généré correct : <pre><code>

Ce plugin rationalise l’affichage du code sous SPIP en générant du code HTML correct (conforme à la spécification HTML du W3C). Avec ce plugin, les blocs de code sont désormais correctement formés des balises HTML appropriées <pre> et <code>, comme suit :

 <pre>
   <code>
     ...
   </code>
 </pre>

La balise HTML <pre> a pour particularité de restituer le texte dans le code source de la même manière qu’il a été tapé : les espaces multiples, les tabulations et les sauts de ligne sont préservés. Pour en savoir plus, lire : À quoi sert la balise <pre> ?

Distinguer les différents langages

Pour que vos lecteurs et lectrices identifient plus facilement le type de code affiché, vous pouvez ajouter un attribut class sur le raccourci pour préciser le langage utilisé : spip, php, html, css, js, less, scss, etc. Par exemple <code class="spip"> affiche visuellement et discrètement dans un coin du bloc qu’il s’agit de code « spip » :

Personnaliser l’affichage

Ce plugin injecte une feuille de style dédiée pour assurer un rendu lisible et agréable de vos blocs de code.

  1. Pour visualiser le rendu, affichez la page de démo ../?page=demo/precode dans votre site.
  2. Ajoutez vos personnalisations d’affichage via CSS, dans votre propre feuille de style. Pour ce faire, consultez : Le CSS pour la balise pre.

Ce plugin est compatible avec le plugin Coloration Code : il surcharge ses traitements et génère un code HTML valide. Il n’est par contre pas compatible avec l’affichage des numéros de lignes, cette option de Coloration Code génère un balisage HTML irrécupérable.

Exemples

Ce plugin est visible en situation sur le site pour lequel il a été initialement développé, notamment dans les articles de la rubrique « Atelier SPIP » :

Rendu des blocs de code avec le plugin Pre & Code sur le site romy.tetue.net

Il a été installé, associé à Coloration Code, sur les nouvelles versions des sites de la galaxie, où vous pouvez donc le voir fonctionner en situation : spip.net, programmer.spip.net et forum.spip.net

Rendu d’un bloc de code avec les plugins Pre & Code et Coloration Code sur les sites de la galaxie SPIP.

Évolutions

En l’état, ce plugin est un patch qui corrige le ticket 2504 : <pre> plutôt <div> pour afficher du code en bloc. Pour la suite, voir sa todo.

Voir en ligne : https://plugins.spip.net/precode

Dernière modification de cette page le 5 avril 2018

Retour en haut de la page

Vos commentaires

  • Le 8 avril à 18:35, par Chrys En réponse à : Pre & Code

    Oui !!! Facile a utiliser et très élégant :-)

    J’ai juste un soucis avec le html, en utilisant <code class="html"> cela m’affiche un cadre gris sans la possibilité de copier le code ni l’info html en haut a droite.

    • Le 9 avril à 22:02, par nicod_ En réponse à : Pre & Code

      Effectivement, il y a un problème avec <code class="html">, qui n’est pas du tout traité par le plugin.
      Je regarde ça.

    • Le 9 avril à 22:29, par nicod_ En réponse à : Pre & Code

      Bon, alors c’est plutôt du côté de coloration_code qu’il y a un souci.
      Tu l’utilises aussi ? essaie de le désactiver pour tester, et dis moi si tu confirmes.

    • Le 9 avril à 22:56, par Chrys En réponse à : Pre & Code

      Bonsoir, oui je confirme que sans Coloration code ca fonctionne

    • Le 10 avril à 00:06, par nicod_ En réponse à : Pre & Code

      J’ai corrigé Coloration code pour qu’il utilise les traitements de Pre&code.
      https://zone.spip.org/trac/spip-zone/changeset/109855
      La version 0.9.17 devrait apparaitre rapidement dans SVP.

    • Le 10 avril à 00:43, par Chrys En réponse à : Pre & Code

      Excellent !! Merci :)

    Répondre à ce message

  • Le 5 avril à 08:53, par Matthieu Marcillaud En réponse à : Pre & Code

    Merci ! Très pratique sur les sites de la galaxie, avec un joli rendu.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • GIS 4

    11 août 2012 – 1524 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • ScolaSPIP 4

    19 janvier 2016 – 383 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Jeux pour SPIP 3

    27 juillet 2012 – 53 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 704 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • Vidéo Accessible

    6 avril 2011 – 168 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est (...)