Le plugin “Coloration code”

Écrit le 5 avril 2026 - 21 vues


Dans cet article, je teste le plugin « Coloration Code » pour SPIP dans le cadre de mon propre usage. N’étant en aucun cas un expert, mon retour se base uniquement sur une utilisation personnelle et des observations pratiques.

L’objectif est simplement de voir comment il fonctionne au quotidien, d’évaluer sa facilité de mise en place ainsi que le rendu obtenu pour l’affichage d’extraits de code. Je m’intéresse notamment à la lisibilité, à la prise en charge des langages et à l’intégration dans un site SPIP existant.

Ce test n’a donc pas de valeur exhaustive ou technique avancée, mais plutôt celle d’un retour d’expérience utilisateur, avec les limites que cela implique.

HTML

<div class="container">
    <h1>Bienvenue sur mon site SPIP</h1>
    <p>Ceci est un exemple de code mis en forme avec <strong>PrismJS</strong>.</p>
    <button class="btn-prism">Cliquez ici</button>
</div>

JS

<script>
function copyChrysCode(btn) {
    const code = btn.closest('.prism-chrys-wrapper').querySelector('code').innerText;
    navigator.clipboard.writeText(code).then(() => {
        const old = btn.innerText;
        btn.innerText = 'Copié !';
        setTimeout(() => { btn.innerText = old; }, 2000);
    });
}
</script>

CSS

/* Curseur main sur les elements input cliquables */
input[type="submit"],input.btn,input.submit,
input[type="button"],input.button,
input[type="image"],input.image,
button { cursor: pointer; }

.banner_description{
  margin-top: 0.725rem;
  margin-bottom: 1.75rem;
}
.banner > * {
  max-width: 675px;
}

@media (min-width: 610px){
  .banner{
    --image: url(../images/banner-desktop.jpg);
    border-radius: 40px;
  }
}

@media (min-width: 1100px){
    .banner{
      min-height: 743px;
    }
}

SPIP

<BOUCLE_card_sommaire_fr(ARTICLES)>
  <div class="card">
    <div class="no-hover">
       [(#LOGO_ARTICLE|#URL_ARTICLE|sinon{<img src="IMG/logo/pardefaut.webp" alt="Logo par défaut">})]
   </div>
   <div class="card-content">
        <h3>[(#TITRE)]</h3>
        [(#DESCRIPTIF|sinon{#TEXTE|couper{100}})]
        <a href="#URL_ARTICLE" class="button"><:lirelasuite:></a>
    </div>
  </div>
</BOUCLE_card_sommaire_fr>

À bientôt, ici ou ailleurs !

Chrys

Actualités