Coloration Code

Published : 22 December 2008 – updated on 30 December 2025 – by bricebou, Matthieu Marcillaud – 39 commentaires

1
2
3
4
5
24 Votes
Basé sur le moteur JavaScript highlight.js qui prend en charge près de 200 langages et propose près de 250 thèmes, ce plu­gin per­met de colo­ri­ser du code source pour dif­fé­rents lan­ga­ges (dont HTML, PHP, SPIP...).

Le plugin Coloration Code pour SPIP 4.2+ bascule d’un traitement côté serveur avec GeSHi à la librairie JavaScript highlight.js qui prend en charge près de 200 langages et propose près de 250 thèmes.

Usage

SPIP 4.2 introduit le raccourci triple backtips (```) pour délimiter des extraits de code. Il suffit de préciser le langage correspondant à votre extrait de code pour que celui-ci soit intégré au markup généré ; ainsi pour du HTML :

<pre class="spip_code spip_code_block language-html" data-language="html">
    <code>
        ...
    </code>
</pre>

Coloration Code se sert ainsi par exemple de l’attribut data-language généré par SPIP.

Configuration

Coloration Code fonctionne “out of the box” grâce à sa méthode de chargement dynamique, activée par défaut ; celle-ci permet de charger automatiquement toutes les syntaxes repérées au sein d’une page.

Cette méthode, si elle a l’avantage de permettre de suite de voir si le plugin fonctionne, reste problématique : en effet, les scripts des grammaires ainsi téléchargés ne passent pas au travers des mécanismes de concaténation, minification et surtout de cache de SPIP.

Il peut donc être plus intéressant d’utiliser la méthode statique qui nécessite de sélectionner les grammaires qui seront alors chargées sur toutes les pages de votre site mais qui passeront par les outils décrits ci-dessus.

Développement

L’ensemble des scripts de langage et des thèmes de highlight.js présents dans le répertoire assets/highlightjs/ de ce plugin sont une copie des fichiers générés par la compilation des sources de la librairie.

Une fois ce dépôt cloné, il faut récupérer la librairie highlight.js, déclarée en submodule de GIT :

$ cd lib/highlight.js
$ git submodule init
$ git submodule update

Une fois les sources de highlight.js récupérées, il faut installer les dépendances nécessaires à leur compilation :

$ npm install

Puis on lance la commande

$ node tools/build.js -t cdn

Les fichiers compilés et minifiés sont alors disponible dans le répertoire lib/highlight.js/build/.

Développer la syntaxe SPIP

L’écriture d’un langage pour highlight.js permettant de colorer la syntaxe des squelettes de SPIP est en cours ; le code en est disponible sur la forge de développement (https://git.spip.net/spip-contrib-outils/highlightjs-spip) et elle est intégrée comme submodule GIT de ce plugin.

Pour récupérer le code source :

$ cd lib/highlightjs-spip
$ git submodule init
$ git submodule update

Il convient alors de faire un lien symbolique de ce répertoire lib/highlightjs-spip vers lib/highlight.js/extra :

$ ln -s $PWD/lib/highlightjs-spip $PWD/lib/highlight.js/extra

Pour lancer la compilation des langages en mode développement, il faut utiliser la commande suivante depuis le répertoire de la lib, lib/highlight.js :

npm run-script build-browser spip

On peut alors utiliser l’outil fourni par highlight.js (lib/highlight.js/tools/developer.html) pour développer notre grammaire.

Ensuite, il convient de tester le langage :

$ npm run-script build_and_test

Discussion

5 years 1 year 3 months Without limit
par date
Filter

22 discussions

  • Chrys

    Bonjour,
    Je découvre ce plugin avec grand plaisir. Y a-t-il moyen d’avoir les numéros de ligne sur les blocs de code ainsi qu’un bouton de téléchargement ?
    Merci.
    Bien à vous.

    Reply to this message

  • 3
    Loiseau2nuit

    Bonjour,

    Depuis la mise à jour en v1.0.0 par SVP, sur un SPIP 4.2, le plugin ne fonctionne plus du tout chez moi.

    L’identification des langages et la mise en forme des cadres ne s’applique plus.

    J’ai testé les deux modes (statique et dynamique) mais rien à faire, même en vidant le cache (spip et navigateur)

    Voir capture avec 2 cadres, le 1er est en class html, le second en class bash ... aucune différence !

    J’ai loupé un truc où ... ??? 🤔

    Merci par avance

    Reply to this message

  • Patrice MOREL

    Bonjour,

    J’ai des problèmes d’affichage !

    Merci
    Patrice
    https://collectif-jeandeneyman.fr/
    Réalisé sous SPIP 4.3.2
    Habillage ESCAL 5.2.1
    Hébergeur : Spipfactory

    Reply to this message

  • 4
    gilcot

    Bof, bof, :) Comme dit si bien la documentation, ce ne sont que les les quelques cas pris en charge par SPIP qui sont colorisés ...alors que la bibliothèque Geshi permet bien plus :o
    Je continue à creuser :D

    • yolo!

      il suffit de mettre le nom du code dans la class du cadre?
      comme ceci, exemple d’un cadre code ou

      x = 1
if x == 1:
    # indented four spaces
    print("x is 1.")
      package main

import "fmt"

func main() {
    fmt.Println("hello world")
}
          #include <iostream>
    using namespace std;
    int main() 
    {
        cout << "Hello, World!";
        return 0;
    }
      if [[ ! -e "${archive_path}" ]]; then
        echo "dl paquet  ${dl_url}" >&2
        curl -fsSL "${curl_header[@]}" ${dl_url} -o ${archive_path} \
            && log_success "paquet ${prefix} téléchargé" \
            || log_error   "erreur lors du téléchargement ${prefix} ${repo} ${api_url}"
fi

      Il vous faudrait la coloration pour quel langage?

    • yolo!

      bizarre dans la prévisualisation ça semble fonctionner :)

    • gilcot

      Comme mentionne la documentation du plugin :

      Les lan­ga­ges susceptibles d’être colorisés sont ceux four­nis dans https://zone.spip.net/trac/spip-zone/browser/_plugins_/coloration_code/branches/v0.6/geshi/geshi dont la classe sup­plemen­taire :

      Effectivement, il y a tous les langages supportés par GeSHi (j’avais cru, à la lecture, qu’une sélection avait été faite mais la bibliothèque/lib est visiblement complète)
      Au fait, pour le C++ c’est “cpp”

      Par contre, ça n’a pas l’air de fonctionner pour tous, comme le montrent tes exemples (j’avais, pour ma part, testé “go” et “python” aussi, ainsi que “sql”/“plsql”/“postgresql” qui n’ont pas fonctionné alors “mysql” et “spip” oui)

    • gilcot

      Bon, entre temps j’ai trouvé... GeSHi est bien appliqué (et en regardant le source de la page, “c++” est magiquement reconnu...) Par contre, il y ici (toujours dans le code source de la page) un appel à “plugins/gribouille2/css/geshi.css” qui associe les classes générées par GeSHi aux classes englobantes suivantes : “spip_spip” ; “spip_php” ; “spip_xml” ; “spip_css” ; “spip_bash”
      Donc, ce qui semble fonctionner chez moi doit provenir d’un plugin qui défini les CSS qui vont bien (sachant que le plugin lui-même ne propose que la numérotation dans l’espace privé...) Mystère résolu...

    Reply to this message

  • 1
    SamT

    Hello,

    merci pour ce chouette plugin !

    Question: je suis sur un site multilingue, cependant les cadres affichent “Télécharger” quelle que soit la langue... je voulais voir si je pouvais faire une modification moi même, mais pas moyen de trouver la chaîne de caractère “Télécharger” dans le plugin, je suis confus ^^

    Merci !

    Sam.

    • SamT

      Je m’empresse de répondre moi-même à mon énorme erreur: mais non, le texte change bien en fonction de la langue, tout est par-fait ! (erreur de cache).

      Merci encore pour ce beau travail !

    Reply to this message

  • Bredt

    Merci pour ce plugin,
    Je me demandais si ce ne serait pas intéressant d’ajouter une option start pour pouvoir citer du code en le localisant (ligne).

    <cadre class='php' start=385>
// la fameuse ligne 385
// la ligne 386
//...

    Accessoirement, y’a-t-il un moyen d’échapper une ligne ? dans l’exemple dessus j’ai fermé le cadre 2 fois (puisque j’ai un cadre dans un cadre) et le intérieur ferme le cadre extérieur.
    Merci

    Reply to this message

  • Laurent Bloch

    Bonjour,

    La colorisation fonctionne correctement, mais le cadre du programme apparaît avec une marge gauche encombrante qui contient le texte “[code]”, je souhaiterais retirer cette marge ; cf. par exemple ici :
    https://www.laurentbloch.net/MySpip3/Knuth-Morris-Pratt-en-style

    J’ai regardé le fichier coloration_code.css, j’y ai vu des choses de 40px et 43px de large qui pourraient être ça, mais c’est trop mystérieux pour que j’y touche.

    J’utilise le squelette Escal, cela peut venir de là.

    Merci de toute indication !

    Reply to this message

  • captain_torche

    J’aurais voulu ajouter une classe au code généré, pour pouvoir l’afficher au milieu du texte (en display:inline) dans certains cas précis.
    Y a-t’il un moyen de le faire ?
    J’ai testé code class=“html4strict inline”, mais le dernier attribut n’est pas pris en compte.

    Reply to this message

  • Thibault

    Bonjour

    Juste une petite remarque : le plugin en version 0.6.6 supprime toutes les lignes vides du texte mis entre les balises <cadre>...</cadre>
    C’est dommage, vu que ça enlève les lignes vide du code source que je veux afficher (et donc rend le code moins lisible)

    En commentant les lignes suivantes :

    $code = preg_replace("/^(\r\n|\n|\r)/m", "", $code);
$code = preg_replace("/(\r\n|\n|\r)$/m", "", $code);

    de coloration_code_fonctions.php, on supprime le problème.
    À l’origine, ces lignes sont là pour enlever les lignes superflues en début de texte et en fin de texte. Mais ce n’est pas ce qu’elles font, en fait...
    (Peut-être que ceci est déjà corrigé dans la version 0.7 que je n’ai pas testé)

    Merci !!

    Reply to this message

  • FJacq

    Bonjour,

    Je rencontre le soucis suivant : j’ai imposé overflow:auto dans les pages de style pour spip_cadre et spip_code. Cela marche bien tant que je ne tente pas de coloriser. Mais dès que j’ajoute class=“un langage quelconque”, le scrolling horizontal ne se fait plus : il est remplacé par un passage à la ligne...

    Quelqu’un a-t-il déjà résolu ce problème ?

    Merci d’avance

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom