SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 246 visiteurs en ce moment

Accueil > Rédaction > Assistants de rédaction > Coloration code > Du joli code dans les articles

Du joli code dans les articles

7 décembre 2004 – par mortimer – 13 commentaires

4 votes

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Ou comment avoir du code coloré dans spip grâce aux nouveaux points d’entrée dans inc_texte. une démo ici.

Quand on insère du code dans un article avec les balises <code>, on peut avoir une présentation différente en ajustant le style css. Pourtant, pour des gros morceaux de code, ça fait vite mal aux yeux.

screenshot
un screenshot de la version complexe. On y voit du code php, java et html coloré.

Voici une utilisation des points d’entrée dans inc_texte.php3 pour faire du « syntax highlighting » du code inséré dans les articles. Ainsi, comme dans tout bon éditeur de code, on peut voir les mots clefs, nom de fonctions etc... dans des couleurs différentes. On a ainsi une lecture plus rapide.

-  La version « simple » utilise une fonction de php existante pour colorer du code php compris entre des balises <ccode> et </ccode>.

-  La version plus complexe nécessite l’installation d’un module php externe disponible ici ou en version améliorée par mes petites mains ici qui permet de colorer n’importe quel langage [1].

les codes spécifiques se trouvent après l’explication.

Méthode

A partir de la version 1.7.1 de SPIP deux points d’entrée dans inc_texte.php3 sont fournis [2]. Ce fichier est responsable du traitement des raccourcis typographiques que les rédacteurs utilisent quand ils écrivent un article (gras, italique, balises code, etc...) :
-  avant_propre permet de traiter le texte avant que SPIP ne le traite lui même et donc d’intercepter des raccourcis qui seraient modifiés par SPIP autrement.
-  apres_propre permet de traiter le texte après tous les traitements de SPIP.

Vous pouvez donc implémenter, dans votre propre fichier ecrire/mes_options.php des pré/post-traitements pour des nouveaux raccourcis. Voir par exemple cet article, ou ce wiki et cette explication de Fil.

Bon, je vous ment un tout petit peu. Spip, avant d’appeler avant_propre, va échapper (les enlever du texte) certaines parties du texte qui pourraient être sensibles. par exemple le code entre balises <code>. Une fois tout le traitement typographique fait (et donc après apres_propre), Spip réinsère le texte échappé au bon endroit. On verra ce que cela implique dans quelques instants.

La méthode que l’on va utilisée est la même : échapper le code entre les balises <ccode> </ccode> pour le réinsérer tout à la fin avec les informations de couleurs.

Version Simple

Ici, je dit version simple, mais elle implique la même utilisation des points d’entrée dans inc_texte. La seule différence est la technique de coloration du code, qui implique une toute petite différence dans le code de ecrire/mes_options.php3.

Coloration

PHP fournie, avec la fonction highlight_string un moyen de colorer du code. Il y a deux conditions :
-  il doit s’agir de code PHP [3],
-  le code doit être compris entre les balises php standards : <?php et ?> .

prétraitement du texte

dans ecrire/mes_options.php3

Ce code permet d’échapper le code qui se trouve entre nos deux balises. On remplace cette partie du texte par une balise spéciale [4] <@@colorercode_..> qui comprend un index dans le tableau dans lequel on stoque temporairement le code escamoté.

post traitement

dans ecrire/mes_options.php3

Cette fonction est donc appelée à la fin du traitement. On y remplace toutes les balises d’échappement (<@@colorercode_..>) par le code coloré.

On récupère l’index dans le tableau, puis on appelle la fonction highlight sur le code. Il faut ensuite lui faire un petit traitement :
-  on ajoute le code de formatage, qui met le code coloré dans un DIV de classe spip_ccode [5],
-  on enléve les balises code (html cette fois, pas spip) ajoutées par la fonction highlight,

La dernière étape nécessite quelques explication. Comme mentionné plus tôt, SPIP échappe un certain nombre de chose avant d’appeler avant_propre, et le remplace par des balises spéciales. Si dans notre code, spip a trouvé quelque chose à échappé (par exemple certain code html au milieu du code php), alors il le fera [6].

Mais les balises spéciales spip sont ensuite traitées par l’highlighter, ainsi les < et > sont remplacés par &lt; et &gt;. On doit donc les retransformer pour avoir des < et >.

Cela pose un deuxième problème, prenons un exemple : Si votre code php contient une balise d’image

$reg = "/<img src='IMG\/([^']+)'.+alt=(.+) title=([^>]+)>/";

,
alors spip va l’échapper :
$reg = "<@@SPIPSOURCEPROPREX@@>";
et le remettre en place après votre traitement du code php. Ainsi la chaine de caractéres ne sera pas colorée, mais prise comme une vraie balise html [7]. il faut donc mettre tout le code html qui se trouve dans votre code php entre balises spip <code>, sous peine d’avoir de mauvaises surprises. Ainsi notre exemple devra être écrit :
$reg = "/<code><img src='IMG\/([^']+)'.+alt=(.+) title=([^>]+)></code>/";

il faut ensuite faire attention au style. Insérez ce code [8] :

dans habillage.css par exemple

dans votre fichier css [9], pour annuler le style .spip_code à l’intérieur d’un bloc .spip_ccode.

Méthode « complexe »

Ici je décris l’installation du code Beautifier et donne un code adapté d’avant_propre et apres_propre. La technique utilisée dans ces deux méthode n’étant pas différente, je ne la redécris pas.

Beautifier

Je vous conseille d’utiliser l’adaptation du beautifier disponible ici [10].

Le beautifier est simple à installer :
- télécharger les fichiers de base,
- télécharger aussi les fichiers de formatages pour les langages qui vous intéressent.
- décompresser les packages où vous voulez dans votre repertoire spip (par exemple dans ecrire/)
- adapté le chemin dans le fichier Beautifier/Init.php
- adapté le chemin dans la fonction décrite ici.

On va donc appeler depuis spip la fonction du beautifier de cette façon :

dans ecrire/mes_options.php3

elle prend deux paramètre : le code à colorer, et le type du fichier (langage).

il vous faudra aussi ajouter ces styles à votre css [9] [11] :

dans habillage.css par exemple

code de traitement du raccourcis

avant_propre et apres_propre ne changent pas beaucoup ici, on les adapte juste pour utiliser des balises au format
<ccode(nom_du_langage)> code à colorer </ccode>

le nom du langage etant le nom dans le fichier HFile, par exemple pour du php3, on a un fichier HFile_php3.php, on donnera donc le nom de langage php3.

dans ecrire/mes_options.php3

Notes

[1Plus de 200 fichiers de configuration sont déjà disponibles.

[2voir l’annonce dans les archives de spip-core

[3du code perl ou C passe à peut pret, vue la similitude.

[4cette technique est justement celle utilisée par SPIP

[5à ajouter à votre fichier css

[6SPIP échappe le texte avec des expressions régulières. Il échappe tout ce qui se trouve entre balise html, code, cadre et poesie. Mais aussi tout code html qui pourrait être mal interprété par le moteur de typographie, soit, tout code html qui ressemble à <[a-zA-Z!][^<>!':;\?]*[!':;\?][^<>]*>

[7i.e. le navigateur cherchera à afficher une image appelée $source.

[8adapté à votre style

[9habillage.css par exemple

[10la condition d’utilisation est de mettre un lien sur votre site vers les sources.

[11et à ecrire/spip_style.php si vous voulez voir la tête du texte dans la partie privée du site.

Dernière modification de cette page le 11 février 2007

Retour en haut de la page

Vos commentaires

  • Le 26 février 2007 à 23:47, par ? En réponse à : Du joli code dans les articles

    Pour ceux qui ne l’auraient pas vu, dans la partie « compliquée » il manque les fonctions avant_propre et apres_propre à récupérer de la partie « simple » et à mettre dans ecrire/mes_fonctions.php(3) également.

    Belle contribution en tout cas !

    Répondre à ce message

  • Le 3 mai 2008 à 14:19, par ? En réponse à : Du joli code dans les articles

    Maintenant on peut utiliser en plus du plugin officiel un autre plugin : SyntaxHighlighter pour SPIP

    Répondre à ce message

  • Le 5 novembre 2005 à 17:39, par Balluche En réponse à : Du joli code dans les articles

    J’ai modifié ta contrib pour utiliser d’autres langages (colorisés à la sauce PHP). Cà peut être utile pour mettre en valeur du code HTML par exemple sans utiliser de programme externe.

    Répondre à ce message

  • Le 22 juin 2005 à 09:21, par Nicolas En réponse à : > Du joli code dans les articles

    Tout d’abord merci pour cet article très intéressant.

    Par gout personnel, j’ai remplacé l’utilisation de beautifier par GeSHI. Pour cela, il suffit de modifier la fonction
    apres_colorer_code comme ceci :

    (...)
    while (ereg('<@@colorercode_([^_]+)_([0-9]+)@@>', $texte, $regs)) {
    $lenum = $regs[2];

    include_once('geshi.php');
    $geshi =& new GeSHi($code_a_colorer[$lenum], $regs[1]);
    $lecode = $geshi->parse_code();

    $pos = strpos($texte, $regs[0]);
    (...)

    Sinon, l’on souhaite une expression régulière plus courte en voici une :

    $regexp_echap = ",<ccode\((\w+)\)>(.*?)</ccode>,ims";
    • Le 22 juin 2005 à 16:42, par mortimer En réponse à : > Du joli code dans les articles

      normalement, la fonction my_higlight_string et faite pour être modifiée et brancher un autre systéme. C’est peut être un peu plus simple de proposer une nouvelle fonction :


      je ne connaissait pas ce script, il a l’air vraiment interessant, est-ce que c’est facile d’ajouter un langage ?

    Répondre à ce message

  • Le 19 décembre 2004 à 01:49, par Hapax En réponse à : > Du joli code dans les articles

    « screenshot » se dit « copie d’écran » ; « syntaxe highlighting » se dit « surlignement syntaxique » ; etc... si si ! c’est important.

    • Le 2 janvier 2005 à 16:12, par bmr En réponse à : Du joli code dans les articles

      100% d’accord avec toi, Hapax.

      Malgré tout je suis surpris que ce soit le seul commentaire pour cet intéressant article, qui une application de avant_propre et apres_propre. J’avais déjà lu les explications indiquées en tête de cet article, auxquelles je n’avais rien compris. Me voilà comblé maintenant. Reste plus qu’à utiliser cette contrib et à l’adapter à mes besoins.

    • Le 2 janvier 2005 à 20:19, par bmr En réponse à : Du joli code dans les articles

      Je veux afficher du code HTML, mais j’ai l’impression que c’est l’expression

      $regexp_echap = "(<ccode>(([^<]|<[^/]|</[^c]|</c[^c]|</cc[^o]|</cco[^d]|</ccod[^e]|</ccode[^>])*)<\/ccode>)";

      qui ne sait pas délimiter certaines séquences ...</ccode.

      Pour moi ce genre de regexp, c’est l’enfer ! Je me demande d’ailleurs pourquoi il n’existe pas quelque chose pour interdire une séquence de caractères. Peut-être avec une référence arrière ? mais je ne vois pas trop comment...

    • Le 3 janvier 2005 à 18:26, par mortimer En réponse à : > Du joli code dans les articles

      et fin de semaine alors !!

      bon je n’ai plus le droit d’ecriture sur l’article, ça tombe mal.

    • Le 3 janvier 2005 à 19:01, par mortimer En réponse à : > Du joli code dans les articles

      je crois qu’on peut faire cela. J’ai découvert après et jamais essayé :

        $regexp_echap = "(<ccode\\((.+)\\)>(.*)<\/ccode>)U";

      mais attention, il faut aussi reprendre les index plus loin.

      Qu’est ce qui passe pas comme code html en fait ?

    • Le 3 janvier 2005 à 23:47, par bmr En réponse à : Du joli code dans les articles

      Escuses. J’ai testé la regexp toute seule. Elle marche très bien. Donc elle n’est pas en cause...

      J’ai des balises HTML entre et le script en masque certaines. Je viens de trouver la raison pour certaines : les balises qui entourent une page HTML sont prises pour des raccourcis du même nom. Mais il y a d’autres choses que je ne comprends pas et SPIP met des @@SPIP_SOURCEPROPREXX@@ (sans <> autour) dans les $code_a_colorer[$colo_code_ech].

      Ayant utilisé Beautifier avec le fichier html fourni, comme ça ne fonctionnait pas, je suis passé à la méthode simple et encore sans highlight_text. J’utilise une méthode simple pour passer les balises HTML en < et >.

    • Le 4 janvier 2005 à 15:05, par mortimer En réponse à : > Du joli code dans les articles

      Ok, le problème est expliqué dans l’article :

      SPIP appelle sa fonction d’échappement des blocs « code », « html », « cadre » etc... avant celle fournit ici et je n’y peut rien :(

      La méthode, vraiment pas cool quand on doit utiliser <html>, c’est d’écrire <code><html></code>.

      La deuxième méthode, pas très cool non plus, c’est les &lt ; à la place des <.

      Dans les deux cas, beautifier sera perdu et ne pourra pas colorer les parties échappées.

    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

  • Facteur

    21 janvier 2010 – 391 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Réservation d’événements

    16 mars 2015 – 340 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Plugin Modèles media

    25 avril 2011 – 177 commentaires

    Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

  • Mailsubscribers

    16 janvier 2013 – 307 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • Plugins Giseh

    26 novembre 2010 – 422 commentaires

    Les plugins correspondants aux fonctionnalités de Giseh, compatibles avec SPIP 3.0 (et SPIP 2.1), sont les suivants : le plugin « ciparam : Configurateur de squelettes » le plugin « cisquel : Squelettes de base avec 3 colonnes » le plugin «  (...)

Ça spipe par là